NextJS 是一个用于生产环境的 React 框架，它可以提供生产环境所需的所有功能，开发体验极佳。
提供的功能包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等，无需任何配置。
也许你现在还没用到服务端渲染，当你需要的时候，不妨看看这篇文章。
# 基本介绍
谈到 NextJS，使用过的程序员无不为它点赞。对它的优点，官方总结如下：
-
直观的、 基于页面的路由系统（并支持动态路由）
-
预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)
-
自动代码拆分，提升页面加载速度
-
具有经过优化的预取功能的客户端路由
-
内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库
-
开发环境支持快速刷新
-
利用 Serverless Functions 及API 路由构建 API 功能
今天我们先谈谈它路由，从两点下手：
-
基于页面的路由系统
-
动态路由
# 基于页面的路由系统
当我们准备使用 next 的时候，我们首先要安装 next react react-dom。
npm install react react-dom next
当然官方也给了配置好的脚手架 create-next-app，我们先专注于从零开始。
安装完这三个依赖模块之后，我们去修改一下 next 的启动指令，在 package.json 下修改scripts的属性。
"scripts": {
"dev": "next", //直接启动一个服务 它的构建在内存里执行
"build": "next build",//打包，当前目录下有.next文件，打包后的结果都在里面
"start": "next start"//启动服务
},
# 页面路由
在项目下创建一个 pages 的文件夹。这个文件夹必须叫 pages，不能起其它名称。
然后在 pages 下创建对应的组件，比如 index.js、about.js、lists.js、users.js 等等。
//index.js
import React from "react"
function Home(props){
console.log(props)
return (
<div>
<Head>
<title>index page</title>
</Head>
<h3 className="h3">hello world</h3>
<img src="/01.jpg"></img>
<style jsx>{`
.h3{
color:skyblue;
}
`}</style>
</div>
)
}
export default Home;
当组件建成之后，我们依次在网址上输入 http://localhost:3000 || http://localhost:3000/about || http://localhost:3000/lists 等。
我们会发现根据 path 不同，展示的内容也不同。这就证实了 next 的路由是基于 pages 这个文件系统的。
# 动态路由
对于动态路由，前端小伙伴都很熟悉，那就是在 path 后面紧跟 id 或者 pid，比如 http://localhost:3000/users/1。 那么这个 1 就是对应一个 id=1 的形式。我们就要根据用户输入的值来获取这个id 值。这里需要强调两个点：
-
在 pages 下路由组件的写法
对于路由组件，我们需要以 [pid].js 的这种形式。当然 id 是自定义的，看你需要对路由参数设置什么值而定。
-
在路由组件内的两个函数
1）getStaticPaths()
获取收集动态路由的所有方式。
//[pid].js
export async function getStaticPaths() {
return {
paths: [
{ params: { ... } } // See the "paths" section below
],
fallback: true or false // See the "fallback" section below
}}
这里面的 paths 和 fallback 是两个必填项，需要严格按照这个格式来写。
2）getStaticProps()
引入了 getStaticPaths() 就必须引入 getStaticProps() 来接受路由的参数，示例代码如下：
//[pid].js
function Ha(props){
console.log(props)//{data:[12,23,34]}
return (
<div>
<h3>hello haha</h3>
</div>
)
}
export async function getStaticPaths() {
return {
paths: [
{params:{ pid:"1" }},{params:{pid:"2"}} // See the "paths" section below
],
fallback: false // See the "fallback" section below
};
}
export async function getStaticProps({params}){
console.log("------",params)
return {props:{data:[12,23,34]}}
}
配置完成后，我们在 url 中输入http://localhost:3000/1 页面就能正常走路由页面了。
如果想实现 http://localhost:3000/posts/1 的这种形式，只需要建个文件夹 posts，把 [pid].js 扔到这个文件夹下就行。
做到这里，next 的路由系统就算是入门了。
