看了就会的next.js路由

前言

本文将会介绍next.js的路由相关内容，作为一个新手，笔者自知文章并没有太多深层次的东西，只希望帮助到跟笔者一样的入门级小伙伴。本文基础为上一篇next.js+koa2+antd环境轻松搭建

next.js目录结构

在介绍路由之前，想先简单说一下目录结构，其中有些东西对于路由讲解还是很有帮助的

├── .next
│   ├── build-manifest.json
│   ├── react-loadable-manifest.json
│   ├── server
│   └── static
├── components
│   ├── head.js
│   └── nav.js
├── pages
│   ├── _app.js
│   └── index.js
├── static
│   └── favicon.ico
├── server.js
├── .babelrc
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── yarn.lock
复制代码

这是next.js+koa2+antd环境轻松搭建一文中创建的next+koa2+antd的文件目录，其中的README.md,package.json,yarn.lock,.gitignore就不说了。

pages和components pages是next.js中非常重要的一个目录，其中每一个js文件就代表一个页面，但是有两个例外，一个是上一篇文章中用到的_app.js,一个是_document.js。我们在pages下再创建一个a.js和test/b.js，然后看看效果

// a.js
export default () => <div>this is a page</div>

// test/b.js
export default () => <div>this is b page</div>
复制代码

我们可以发现next.js会将pages下的js文件根据其路径名和文件名自动生成对应的路由。

但是我们再写页面的时候不可能将所有东西都放在pages下，我们可以将具体内容作为组件放在components目录中，然后在pages中相应的js文件中引入。如果是用脚手架工具生成项目的小伙伴可以很直观的看到components目录中有head.js和nav.js两个组件，在pages/indx.js中将其引入并使用

.next: 在我们运行过next.js项目之后，会自动生成.next目录，这里存放的内容是next.js将我们写的pages和components等源码打包编译后的结果，我们通过浏览器访问可以拿到的内容其实就来自这里，在后续进行上限打包时候也会生成这个目录.

Tips:请不要修改这个目录中的内容

其他 staic目录存放静态文件，比如图片,css,favicon.ico等 .babelrc文件存放babel配置 next.config.js存放next的配置 server.js是我们上一篇写Koa服务器程序的代码

next.js路由

Link组件

我们可以删除index.js中的所有内容，重写为:

import Link from 'next/link' //引入Link组件
import { Button } from 'antd' //引入antd中的Button组件

export default () => {
  return (
    <