路由基礎

路由是每個應用程式的骨架。本頁將介紹網頁路由的基本概念，以及如何在 Next.js 中處理路由。

術語

首先，您會在文件中頻繁看到這些術語。以下是快速參考：

• 樹狀結構 (Tree): 用於視覺化階層結構的慣例。例如包含父子元件的元件樹、資料夾結構等。
• 子樹 (Subtree): 樹狀結構的一部分，從新根節點（第一個）開始到葉節點（最後一個）結束。
• 根節點 (Root): 樹狀結構或子樹中的第一個節點，例如根布局。
• 葉節點 (Leaf): 子樹中沒有子節點的節點，例如 URL 路徑中的最後一段。

• URL 區段 (URL Segment): 由斜線分隔的 URL 路徑部分。
• URL 路徑 (URL Path): 網域名稱後面的 URL 部分（由多個區段組成）。

app 路由

在版本 13 中，Next.js 推出了基於 React 伺服器元件 (React Server Components) 的全新 App 路由，支援共享布局、嵌套路由、載入狀態、錯誤處理等功能。

App 路由在名為 app 的新目錄中運作。app 目錄可與 pages 目錄並存以實現漸進式採用。這讓您可以將部分路由切換到新行為，同時保留其他路由在 pages 目錄中使用舊行為。如果您的應用程式使用 pages 目錄，請同時參閱 頁面路由 (Pages Router) 文件。

須知: App 路由的優先級高於頁面路由。跨目錄的路由不應解析到相同的 URL 路徑，否則會導致建置時錯誤以防止衝突。

預設情況下，app 目錄中的元件是 React 伺服器元件 (React Server Components)。這是效能優化設計，讓您可以輕鬆採用它們，同時也能使用 客戶端元件 (Client Components)。

建議: 如果您不熟悉伺服器元件，請查看 伺服器元件 (Server Components) 頁面。

資料夾與檔案的角色

Next.js 使用基於檔案系統的路由器，其中：

• 資料夾用於定義路由。路由是從根資料夾到最終包含 page.js 檔案的葉資料夾之間的嵌套資料夾路徑。詳見 定義路由 (Defining Routes)。
• 檔案用於建立路由區段顯示的使用者介面。詳見 特殊檔案。

路由區段

路由中的每個資料夾代表一個路由區段。每個路由區段會對應到 URL 路徑中的相應區段。

嵌套路由

要建立嵌套路由，您可以將資料夾互相嵌套。例如，在 app 目錄中嵌套兩個新資料夾即可新增 /dashboard/settings 路由。

/dashboard/settings 路由由三個區段組成：

• / (根區段)
• dashboard (區段)
• settings (葉區段)

檔案慣例

Next.js 提供一組特殊檔案，用於在嵌套路由中建立具有特定行為的使用者介面：

須知: 特殊檔案可使用 .js、.jsx 或 .tsx 副檔名。

元件層級

路由區段特殊檔案中定義的 React 元件會按照特定層級渲染：

1. layout.js
2. template.js
3. error.js (React 錯誤邊界)
4. loading.js (React Suspense 邊界)
5. not-found.js (React 錯誤邊界)
6. page.js 或嵌套的 layout.js

在嵌套路由中，區段的元件會嵌套在其父區段的元件內部。

共置

除了特殊檔案外，您可以選擇將自己的檔案（例如元件、樣式、測試等）共置在 app 目錄的資料夾中。

這是因為雖然資料夾定義了路由，但只有 page.js 或 route.js 回傳的內容才能公開訪問。

了解更多關於 專案組織與共置 (Project Organization and Colocation)。

進階路由模式

App 路由還提供一組慣例來幫助您實現更進階的路由模式，包括：

• 平行路由 (Parallel Routes): 允許您在同一視圖中同時顯示兩個或多個可獨立導航的頁面。可用於具有獨立子導航的分割視圖，例如儀表板。
• 攔截路由 (Intercepting Routes): 允許您攔截路由並在另一個路由的上下文中顯示它。當需要保持當前頁面上下文時非常有用，例如在編輯任務時查看所有任務，或在動態中展開照片。

這些模式讓您可以建立更豐富、更複雜的使用者介面，使歷史上對小型團隊和獨立開發者難以實現的功能變得更加普及。

下一步

現在您已了解 Next.js 中的路由基礎知識，請點擊下方連結建立您的第一個路由：