路由基礎

每個應用程式的骨架都是路由。本頁將介紹網頁路由的基礎概念，以及如何在 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 路由器 文件。

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

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

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

資料夾和檔案的角色

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

• 資料夾 用於定義路由。路由是嵌套資料夾的單一路徑，遵循從 根資料夾 到最終 葉資料夾（包含 page.js 檔案）的檔案系統層次結構。請參閱 定義路由。
• 檔案 用於建立顯示在路由區段的使用者介面。請參閱 特殊檔案。

路由區段

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

嵌套路由

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

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

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

檔案慣例

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

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

元件層次結構

路由區段中特殊檔案定義的 React 元件會以特定層次結構渲染：

• layout.js
• template.js
• error.js (React 錯誤邊界)
• loading.js (React suspense 邊界)
• not-found.js (React 錯誤邊界)
• page.js 或嵌套的 layout.js

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

同置

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

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

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

進階路由模式

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

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

這些模式讓您可以建立更豐富和更複雜的 UI，使歷史上對小團隊和個人開發者來說複雜的功能變得民主化。

下一步

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