正文

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

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

相比于 Pages Router，App Router 具備更強(qiáng)的能力：

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

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

官方推薦的是 App Router，如果項(xiàng)目中用的是 Pages Router，也不要擔(dān)心不能用 App Router，它們兩者是可以共存的。

不過(guò)，App Router 優(yōu)先級(jí)要高于 Pages Router，而且 App Router 默認(rèn)以服務(wù)端渲染工作。

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

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

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

話不多說(shuō)，正式開(kāi)始。

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

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

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

這種結(jié)構(gòu)簡(jiǎn)單直觀，每個(gè)文件夾和文件都對(duì)應(yīng)一個(gè) URL 路徑段。

像這樣的通過(guò)文件夾和文件映射到 URL 路徑的能力，對(duì)我們項(xiàng)目的可維護(hù)性有非常大的幫助。

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

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

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

但是，由文件夾和文件映射到 URL 路徑的做法也有它的缺點(diǎn)——文件位置的變動(dòng)會(huì)直接影響到 URL！

Next.js 應(yīng)用通常都是服務(wù)端渲染，服務(wù)端渲染的目的之一就是為了更好的 SEO。如果因?yàn)槲募恢玫母淖兌绊懙揭寻l(fā)布的頁(yè)面 URL 地址的話，對(duì)網(wǎng)站的 SEO 是極不友好的。

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

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

假如因?yàn)闃I(yè)務(wù)變更，需要把 dashboard 目錄移動(dòng)到 user 目錄下，在 Pages Router 中可能是這樣的：

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

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

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

App Router路由組

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

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

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

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

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

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

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

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

怎么樣，是不是很簡(jiǎn)單。

為便于理解，為大家準(zhǔn)備了源碼以供參考：

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

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

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

最新評(píng)論