从零开始撸Next.js（一）：基于文件的路由

React的路由系统

有过React开发经验的同学肯定都用过​​React Router​​，这是用来告诉React在什么路由状态下需要渲染什么组件，我们一起看下​​v5版本​​的​​React Router​​的路由使用（当前最新v6会有差异）：

<Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="*">
            <NoMatch />
          </Route>
        </Switch>

根据上述配置就可以在三种不同的URL匹配下渲染不同组件，并且最末尾的​​*​​可以用来匹配所有其余预期之外的URL，即404页面，看起来也还是蛮清晰易懂的。

Next.js路由系统

不知道大家有没有听过​​约定优于配置​​这个编程概念，很多设计不好的框架常需要非常多的配置，每个配置都有额外的学习成本和犯错的可能性，配置越多的系统给人感觉就越是复杂难用。
Next.js的路由系统就是一个典型的约定优于配置的例子，直接使用目录和文件的名称充当路由中的匹配规则，让我们不需要学习​​React Router​​中一系列的路由相关的API，这是一个非常​​直觉化​​的设计思路，只需要了解少量目录和文件名与路由映射关系就可以完全不操心配置同步修改的麻烦，我们一起了解下如下几个典型的路由场景是怎么在Next.js中实现的：

1) ​​www.demo.com​​

此处有两个知识点：

• 首先，Next.js所有页面渲染对应组件通通都是放在​​/pages/​​文件夹下面
• 其次，对应某目录的默认路径都是由该文件夹下的​​index.tsx​​文件负责页面渲染
  所以，渲染​​www.demo.com​​路由的就是​​/pages/index.tsx​​文件

2) ​​www.demo.com/users​​

由上面所提到知识可知，渲染该路由的就是​​/pages/users/index.tsx​​文件

3) ​​www.demo.com/users/001​​

上述路由中的​​001​​是用户ID，也就是说该参数是动态的，也就不可能给每个用户创建一个对应文件，比如​​/pages/users/001.tsx​​，这种动态路由参数的场景在​​Next.js​​中使用一种特殊的文件名格式​​[xxx]​​，所以，我们使用​​/pages/users/[id].tsx​​这种文件名告诉Next.js，我们此处需要接收一个动态的参数​​id​​，所以，凡是路由规则符合​​www.demo.com/users/xxx​​的格式都会被​​/pages/users/[id].tsx​​渲染，同时，在渲染过程我们肯定也需要拿到对应的用户ID进行数据加载，获取方式如下：

import { useRouter } from "next/router";
import { useEffect } from "react";

export default function UsersPage() {
  const router = useRouter();
  const id = router.query.id;
  // 此处拿到id就可以进行数据获取了

  useEffect(() => {
    // 此处基于id获取数据进行渲染
  }, [id]);
}

4) ​​www.demo.com/orders/2023/01/01​​

此处我们需要先获取年月日三个数值，再对订单进行筛选后显示，很明显这三个参数都是动态参数，首先想到的是使用​​/pages/orders/[year]/[month]/[day]/index.tsx​​这种文件结构，然后在代码中使用​​query​​对象的三个字段来分别获取年月日：

import { useRouter } from "next/router";
export default function FilteredOrders() {
  const router = useRouter();
  const { year, month, day } = router.query;

  return (

  );
}

当然这种方法是OK的，也是可以正常渲染拿到结果，但如果说我们的年月日的参数个数可变，比如有时只会筛选年月，有时还会增加时分秒筛选，这种相对复杂的场景下，上面这种路由格式就不够灵活处理不来。好在Next.js有给到一种文件名格式是​​[...xxx]​​用来接收长度不定的动态参数，所以我们可以使用​​/pages/orders/[...dates].tsx​​来

import { useRouter } from "next/router";

export default function FilteredOrders() {
  const router = useRouter();

  return (

  );
}

5) 404页面

对于这种特殊状态码页面，直接在​​/pages​​根据状态码作为文件名创建对应文件即可，比如​​/pages/404.tsx​​

小结

使用Next.js可以摆脱 React路由配置的一堆事情，直接使用文件夹和文件的名称来映射配置关系，这可以大为减少路由配置同步这一心智负担，Next.js这一套文件名映射路由涉及到的知识点少、学习成本低，是非常优秀的设计。当然，对配置简化的同时也必然减少了灵活性，​​React Router​​学习成本高但也为用户带来高度可定制功能，