Next.js路由组使用之组织路由结构示例详解

正文

Next.js 13.4 版本的发布标志着 App Router 的成熟。

熟悉 Next.js 的小伙伴对它的 Pages Router 肯定不陌生，它具备：简单易用、自动路由、代码分隔、预渲染和服务器渲染以及动态路由等一系列优势。

相比于 Pages Router，App Router 具备更强的能力：

• 更灵活的路由结构：App Router 允许我们更自由地组织和管理路由结构，可以创建路由组来组织相关的页面和功能模块。路由组的能力让项目结构更加清晰、易懂。
• 更精细的路由控制：App Router 提供了更多的路由控制选项，例如可以定义自定义的路由前缀、中间件函数等。
• 更高级的路由功能：App Router 支持更高级的路由功能，如嵌套路由、路由参数验证等。
• 更好的代码分隔和性能优化：App Router 具备更强大的代码分隔和性能优化能力，可以更细粒度地控制每个路由的代码加载和渲染方式。

如果要在 Pages Router 和 App Router 中选择一种的话，你会用哪种方案？

官方推荐的是 App Router，如果项目中用的是 Pages Router，也不要担心不能用 App Router，它们两者是可以共存的。

不过，App Router 优先级要高于 Pages Router，而且 App Router 默认以服务端渲染工作。

当然了，并不是说 App Router 只能用于服务端渲染。关于如何支持客户端渲染，Next.js 官方有介绍，只需要在文件顶部加一行 'use client' 即可。

建议你到官网去了解这些细节，而我们今天分享的主要内容是

借助 Next.js 的路由组来组织更加清晰的路由结构

话不多说，正式开始。

我们知道，在 Next.js 项目目录中，嵌套的文件夹通常映射到 URL 路径。

比如这样一个 URL 路径 http://localhost:3000/dashboard/workspace/forms，在 Pages Router 项目中，文件结构可能是下面这样的：

/next-app
|-- /pages
|   |-- /dashboard
|   |   |-- /workspace
|   |   |   |-- forms.tsx
|   |-- index.tsx
|-- /public
|-- /styles
|-- next.config.js

这种结构简单直观，每个文件夹和文件都对应一个 URL 路径段。

像这样的通过文件夹和文件映射到 URL 路径的能力，对我们项目的可维护性有非常大的帮助。

如果你曾经使用 create-react-app 和 react-router 创建过项目的话，你应该感触比较深。

尤其是我们接手一个新项目的时候，在完全不熟悉的情况下调试某个页面，通过路由来定位页面还是比较麻烦的。

常见的做法是先找到路由定义文件，然后再根据路由确定相应的代码文件。而 Next.js 将文件映射到 URL 路径的能力让我们省去了这一步，可以直接通过文件结构就能确定页面文件的位置。

但是，由文件夹和文件映射到 URL 路径的做法也有它的缺点——文件位置的变动会直接影响到 URL！

Next.js 应用通常都是服务端渲染，服务端渲染的目的之一就是为了更好的 SEO。如果因为文件位置的改变而影响到已发布的页面 URL 地址的话，对网站的 SEO 是极不友好的。

为此，Next.js 在 App Router 中提供了一个解决方案——路由组（Route Group）。

仍然以上面的 URL http://localhost:3000/dashboard/workspace/forms 为例。

假如因为业务变更，需要把 dashboard 目录移动到 user 目录下，在 Pages Router 中可能是这样的：

/next-app
|-- /pages
|   |-- /user
|   |   |-- /dashboard
|   |   |   |-- /workspace
|   |   |   |   |-- forms.tsx
|   |   |-- index.tsx
|-- /public
|-- /styles
|-- next.config.js

由于项目结构改变，现在 forms 页面的路由会变成这样：http://localhost:3000/user/dashboard/workspace/forms。

显然，这不是我们期望的结果。

App Router路由组

这时候就需要 App Router 的路由组能力了。

/next-app
|-- /app
|   |-- /(user)
|   |   |-- /dashboard
|   |   |   |-- /workspace
|   |   |   |   |-- /forms
|   |   |   |   |   |-- page.tsx
|   |   |   |   |   |-- layout.tsx (可选的，如果你想为 `/workspace` 下的所有页面定义一个特定的布局)
|   |   |   |-- layout.tsx (可选的，如果你想为 `/dashboard` 下的所有页面定义一个特定的布局)
|-- /public
|-- /styles
|-- next.config.js

不难发现，(user) 是一个被小括号包裹目录。除此之外，没有任何变化。

在 Next.js 的 App Router 中，被小括号 () 包裹的目录名，被称为路由组。

路由组的一大特点便是不会影响到 URL 路径。上面的目录结构映射后的 URL 路径仍然是：http://localhost:3000/dashboard/workspace/forms。

用好路由组还能让我们组织出更清晰的项目结构。把相关的业务或者页面放在同一个路由组下面也更直观。

除此之外，路由组也可以和 App Router 提供的嵌套布局能力一同使用，非常强大、灵活。后面我会专门写一篇嵌套路由相关实践的文章，这里先不讨论。

所以，如果要总结一下的话，就一句话：路由组不会影响到映射后的 URL 路径。

怎么样，是不是很简单。

为便于理解，为大家准备了源码以供参考：

$ npm install -g agelesscoding/cli # 安装公众号配套的 agc 脚手架
$ agc init # 在列表中，选择对应的源码示例，比如 20231001 表示 2023 年 10 月 01 号的文章源码

对脚手架感兴趣的直接在 npm 上搜一下就好了 ~

以上就是Next.js路由组使用之组织路由结构示例详解 的详细内容，更多关于Next.js组织路由结构的资料请关注脚本之家其它相关文章！