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 的路由系统就算是入门了。