Next.js 路由系統大揭秘: (folder)、[folder] 和 [[…folder]] 三兄弟的愛恨情仇
哈囉各位開發者朋友們!今天我們要來聊一個超級有趣又實用的話題 —— Next.js 的路由系統。沒錯，就是那個讓你又愛又恨的 (folder)、[folder] 和 [[…folder]]。這三兄弟看起來長得挺像的，但個性可大不相同呢!今天就讓我們一起來扒一扒他們的老底，看看誰才是你的真命天子!
路由三兄弟大亂鬥
首先，讓我們來個速成班，快速認識一下這三位"型男":
- (folder): 這是個乖寶寶，最普通的靜態路由
- [folder]: 帥氣多金的二哥，負責處理動態路由
- [[…folder]]: 老么中的戰鬥機，專門捕獲所有路由
看起來是不是很簡單?但別被表象騙了，每個兄弟都有自己的獨門絕技。讓我們繼續深入了解他們的特點和用法吧!
(folder): 靜態路由中的實力派
(folder) 是最基本的路由形式，就像是一個老實巴交的大哥。他負責處理那些固定不變的頁面路徑。
使用方法超級簡單，你只需要在 app 目錄下創建一個文件夾，Next.js 就會自動將其視為一個路由。例如:
app/
├── about/
│ └── page.js
└── contact/
└── page.js
這樣，你就有了 /about 和 /contact 兩個路由。簡單粗暴，就是這麼實在!
(folder) 的獨門絕技
- 簡單明瞭: 目錄結構就是路由結構，一目了然
- SEO 友好: 靜態路由更容易被搜索引擎收錄
- 性能優秀: 靜態路由可以預渲染，加快頁面加載速度
但是，這位大哥也有自己的小缺點。如果你的網站有成千上萬個頁面，難道要一個一個創建文件夾嗎?這時候，就需要請出我們的二哥 [folder] 登場了!
[folder]: 動態路由的魅力擔當
[folder] 是個多才多藝的帥哥，他可以處理那些有規律變化的路由。比如說，你有一個部落格，每篇文章的 URL 都是 /posts/文章id。難道要為每篇文章都創建一個文件夾嗎?太累人了吧!
這時候，[folder] 就派上用場了。你只需要在 app 目錄下創建一個 [id] 文件夾:
app/
└── posts/
└── [id]/
└── page.js
這樣，無論是 /posts/1、/posts/hello-world 還是 /posts/你好世界，都會被這個路由捕獲。酷吧?
[folder] 的獨門絕技
- 靈活多變: 可以處理各種動態內容
- 代碼覆用: 一個組件搞定多個類似的頁面
- 參數獲取: 可以輕鬆獲取 URL 中的參數
來看看如何在組件中獲取動態參數:
export default function Post({ params }) {
return <h1>文章 ID: {params.id}</h1>
}
簡直不要太方便!
但是，如果你的需求更加複雜，比如說你想捕獲 /posts/2023/06/24 這樣的多層級路由，該怎麼辦呢?別擔心，我們還有壓軸的老么 [[…folder]] 呢!
[[…folder]]: 捕獲所有路由的終極武器
[[…folder]] 是個全能選手，他可以捕獲任意數量的路徑段。無論你的 URL 有多長，多複雜，他都能搞定!
使用方法也很簡單，在 app 目錄下創建一個 [[...slug]] 文件夾:
app/
└── [...slug]/
└── page.js
這樣，無論是 /a、/a/b 還是 /a/b/c/d/e，都會被這個路由捕獲。簡直是神器啊!
[[…folder]] 的獨門絕技
- 全面覆蓋: 可以捕獲任意長度的路徑
- 靈活配置: 可以根據捕獲的路徑段動態生成頁面
- 後備方案: 可以作為 404 頁面的完美替代品
來看看如何在組件中使用捕獲的路徑段:
export default function CatchAll({ params }) {
const { slug } = params
return (
<div>
<h1>捕獲的路徑段:</h1>
<ul>
{slug.map((segment, index) => (
<li key={index}>{segment}</li>
))}
</ul>
</div>
)
}
是不是感覺無所不能?
路由三兄弟的終極比拼
好了，現在我們已經認識了這三兄弟，讓我們來個終極比拼，看看他們各自的優缺點吧!
| 特性 | (folder) | [folder] | [[…folder]] |
|---|---|---|---|
| 適用場景 | 固定頁面 | 動態內容 | 複雜多層級路由 |
| 靈活性 | 低 | 中 | 高 |
| 配置難度 | 簡單 | 中等 | 稍複雜 |
| SEO 友好度 | 高 | 中 | 低 |
| 性能 | 優 | 良 | 中 |
| 代碼覆用 | 低 | 高 | 極高 |
如何選擇你的真命天子?
看完了這麼多，你可能會問:“那我到底該用哪個啊?“別急，讓我來給你一些建議:
- 如果你的網站結構簡單，頁面數量有限，優先選擇 (folder)
- 如果你有大量類似結構的頁面(如部落格文章、產品詳情)，選擇 [folder]
- 如果你的網站結構非常複雜，或者你想實現一些特殊的路由邏輯，選擇 [[…folder]]
其實，最理想的情況是三種方式結合使用。比如:
app/
├── about/ # 靜態路由
│ └── page.js
├── posts/
│ └── [id]/ # 動態路由
│ └── page.js
└── [...catchAll]/ # 捕獲所有路由
└── page.js
這樣，你就可以充分發揮每種路由方式的優勢，打造一個靈活又強大的 Web 應用了!
結語
好啦，今天的 Next.js 路由系統大揭秘到此結束。希望通過這篇文章，你已經成功掌握了 (folder)、[folder] 和 [[…folder]] 這三兄弟的獨門絕技。記住，沒有最好的路由方式，只有最適合你項目的路由方式。
所以，大膽地去嘗試吧!相信你一定能夠打造出一個令人驚艷的 Next.js 應用。如果你有任何問題或者想法，歡迎在評論區留言討論。祝你編碼愉快，下次再見!