NextJS - Routing - Routing Fundamentals

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

# 術語

• 你會在文件中看到這些術語，以下是快速參考：

# 元件樹的術語

• tree：用來視覺化階層結構的一種約定。例如包含父元件和子元件的元件樹、資料夾結構等。
• subtree：tree 的一部分，從 root（第一個節點）開始，直到 leaf（最後一個節點）結束。
• root：tree 或 subtree 中的第一個節點，例如 root layout。
• leaf：subtree 中沒有子節點的節點，例如 URL path 中的最後一個 segment。

# URL 結構的術語

• URL Segment：由斜線分隔的 URL path 的一部分。
• URL Path：出現在 domain 之後的部分，由多個 segment 組成。
• 示意圖：

# APP Router

• 在 Next.js 13 版本中，引入了基於 React 伺服器端元件的新 APP Router，支援 shared layouts、nested routing、loading states、error handling 等功能。
• APP Router 位於名為 app 的新目錄中，該目錄與 pages 目錄並行，允許漸進式採用。這意味著 APP 的部分路由可以使用新行為，其他路由仍可以保留在 pages 目錄中。
• 注意：APP router 優先於 Pages router。跨目錄的 routes 不應解析為相同的 URL 路徑，否則會在構建時引發衝突錯誤。

• 預設情況下，app 目錄中的元件是 React Server Components，這是一種性能優化方式。你也可以使用 Client Components。

# 資料夾與檔案的角色

• Next.js 使用基於檔案系統的 route，資料夾用來定義 route。一個 route 是從根目錄到包含 page.js 檔案的最終葉子資料夾的嵌套路徑。
• 檔案用來為路由段創建 UI。

# Route Segment

• 路由中的每個資料夾代表一個 route segment。每個 route segment 對應 URL path 中的一個 segment。

# Nested Routes

• 如何將 route segment 映射到 URL segment
• • 你可以通過將資料夾嵌套在一起來創建 nested route。例如，在 app 目錄中嵌套兩個新資料夾即可新增 /dashboard/settings 路由。
  • /dashboard/settings 路由由三個 segment 組成：
  • • / (root segment)
    • dashboard (segment)
    • settings (leaf segment)

# File Conventions

• Next.js 提供了一組特殊檔案，用來為 nested route 創建具有特定行為的 UI：
• • layout 共享 segment 及其子 segment 的 UI
  • page route 的唯一 UI，並使 route 公開可訪問
  • loading segment 及其子 segment 的加載 UI
  • not-found segment 及其子 segment 的找不到頁面 UI
  • error segment 及其子 segment 的錯誤 UI
  • global-error 全局錯誤 UI
  • route Server Side API 端點
  • template 專門的 re-render layout UI
  • default Parallel Routes 的回退 UI
• 注意：這些特殊檔案可以使用 .js、.jsx 或 .tsx 檔案副檔名。

# Component Hierarchy

• 定義在 route segment 中的特殊檔案內的 React component 按特定的層次結構呈現：
• • layout.js
  • template.js
  • error.js (React 錯誤邊界)
  • loading.js (React 懸掛邊界)
  • not-found.js (React 錯誤邊界)
  • page.js 或嵌套 layout.js
• 示意圖：

# 檔案約定的元件層次結構

• 在 nested route 中，segment 的 component 將嵌套在其 parent segment 的 component 內。

# Co-location

• 除了特殊檔案外，你還可以選擇將自己的檔案（如 components、styles、tests 等）共置在 app 目錄中的資料夾內。
• 資料夾定義路由，但只有 page.js 或 route.js 返回的內容是公開可訪問的。
• 示意圖

# Advanced Routing Patterns

• APP Router 還提供了一組 convention，幫助你實現更進階的路由模式。這些包括：
• • Parallel Routes：允許在同一視圖中同時顯示兩個或更多頁面，並且可以獨立導航。例如：儀表板。
  • Intercepting Routes：允許攔截一個路由，並在另一個路由的上下文中顯示它。例如：在編輯任務時保持任務列表，或在照片動態中放大照片。
• 這些模式讓你能夠構建更豐富、更複雜的 UI，對小型團隊和個人開發者來說，以前這些功能的實現非常複雜。

# 參考

Next.js Documentation