嗨，我是你稳定更新、持续输出的勾勾。

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.jsimport React from "react"function Home(props){    console.log(props)    return (        <div>            <Head>                <title>index pagetitle>            Head>            <h3 className="h3">hello worldh3>            <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].jsexport 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].jsfunction Ha(props){    console.log(props)//{data:[12,23,34]}    return (        <div>
            <h3>hello hahah3>        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]}}}