正文

Next.js 13.4 版本的發(fā)布標志著 App Router 的成熟。

熟悉 Next.js 的小伙伴對它的 Pages Router 肯定不陌生，它具備：簡單易用、自動路由、代碼分隔、預渲染和服務器渲染以及動態(tài)路由等一系列優(yōu)勢。

相比于 Pages Router，App Router 具備更強的能力：

• 更靈活的路由結(jié)構(gòu)：App Router 允許我們更自由地組織和管理路由結(jié)構(gòu)，可以創(chuàng)建路由組來組織相關(guān)的頁面和功能模塊。路由組的能力讓項目結(jié)構(gòu)更加清晰、易懂。
• 更精細的路由控制：App Router 提供了更多的路由控制選項，例如可以定義自定義的路由前綴、中間件函數(shù)等。
• 更高級的路由功能：App Router 支持更高級的路由功能，如嵌套路由、路由參數(shù)驗證等。
• 更好的代碼分隔和性能優(yōu)化：App Router 具備更強大的代碼分隔和性能優(yōu)化能力，可以更細粒度地控制每個路由的代碼加載和渲染方式。

如果要在 Pages Router 和 App Router 中選擇一種的話，你會用哪種方案？

官方推薦的是 App Router，如果項目中用的是 Pages Router，也不要擔心不能用 App Router，它們兩者是可以共存的。

不過，App Router 優(yōu)先級要高于 Pages Router，而且 App Router 默認以服務端渲染工作。

當然了，并不是說 App Router 只能用于服務端渲染。關(guān)于如何支持客戶端渲染，Next.js 官方有介紹，只需要在文件頂部加一行 'use client' 即可。

建議你到官網(wǎng)去了解這些細節(jié)，而我們今天分享的主要內(nèi)容是

借助 Next.js 的路由組來組織更加清晰的路由結(jié)構(gòu)

話不多說，正式開始。

我們知道，在 Next.js 項目目錄中，嵌套的文件夾通常映射到 URL 路徑。

比如這樣一個 URL 路徑 http://localhost:3000/dashboard/workspace/forms，在 Pages Router 項目中，文件結(jié)構(gòu)可能是下面這樣的：

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

這種結(jié)構(gòu)簡單直觀，每個文件夾和文件都對應一個 URL 路徑段。

像這樣的通過文件夾和文件映射到 URL 路徑的能力，對我們項目的可維護性有非常大的幫助。

如果你曾經(jīng)使用 create-react-app 和 react-router 創(chuàng)建過項目的話，你應該感觸比較深。

尤其是我們接手一個新項目的時候，在完全不熟悉的情況下調(diào)試某個頁面，通過路由來定位頁面還是比較麻煩的。

常見的做法是先找到路由定義文件，然后再根據(jù)路由確定相應的代碼文件。而 Next.js 將文件映射到 URL 路徑的能力讓我們省去了這一步，可以直接通過文件結(jié)構(gòu)就能確定頁面文件的位置。

但是，由文件夾和文件映射到 URL 路徑的做法也有它的缺點——文件位置的變動會直接影響到 URL！

Next.js 應用通常都是服務端渲染，服務端渲染的目的之一就是為了更好的 SEO。如果因為文件位置的改變而影響到已發(fā)布的頁面 URL 地址的話，對網(wǎng)站的 SEO 是極不友好的。

為此，Next.js 在 App Router 中提供了一個解決方案——路由組（Route Group）。

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

假如因為業(yè)務變更，需要把 dashboard 目錄移動到 user 目錄下，在 Pages Router 中可能是這樣的：

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

由于項目結(jié)構(gòu)改變，現(xiàn)在 forms 頁面的路由會變成這樣：http://localhost:3000/user/dashboard/workspace/forms。

顯然，這不是我們期望的結(jié)果。

App Router路由組

這時候就需要 App Router 的路由組能力了。

/next-app
|-- /app
|   |-- /(user)
|   |   |-- /dashboard
|   |   |   |-- /workspace
|   |   |   |   |-- /forms
|   |   |   |   |   |-- page.tsx
|   |   |   |   |   |-- layout.tsx (可選的，如果你想為 `/workspace` 下的所有頁面定義一個特定的布局)
|   |   |   |-- layout.tsx (可選的，如果你想為 `/dashboard` 下的所有頁面定義一個特定的布局)
|-- /public
|-- /styles
|-- next.config.js

不難發(fā)現(xiàn)，(user) 是一個被小括號包裹目錄。除此之外，沒有任何變化。

在 Next.js 的 App Router 中，被小括號 () 包裹的目錄名，被稱為路由組。

路由組的一大特點便是不會影響到 URL 路徑。上面的目錄結(jié)構(gòu)映射后的 URL 路徑仍然是：http://localhost:3000/dashboard/workspace/forms。

用好路由組還能讓我們組織出更清晰的項目結(jié)構(gòu)。把相關(guān)的業(yè)務或者頁面放在同一個路由組下面也更直觀。

除此之外，路由組也可以和 App Router 提供的嵌套布局能力一同使用，非常強大、靈活。后面我會專門寫一篇嵌套路由相關(guān)實踐的文章，這里先不討論。

所以，如果要總結(jié)一下的話，就一句話：路由組不會影響到映射后的 URL 路徑。

怎么樣，是不是很簡單。

為便于理解，為大家準備了源碼以供參考：

$ npm install -g agelesscoding/cli # 安裝公眾號配套的 agc 腳手架
$ agc init # 在列表中，選擇對應的源碼示例，比如 20231001 表示 2023 年 10 月 01 號的文章源碼

對腳手架感興趣的直接在 npm 上搜一下就好了 ~

以上就是Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解 的詳細內(nèi)容，更多關(guān)于Next.js組織路由結(jié)構(gòu)的資料請關(guān)注腳本之家其它相關(guān)文章！