概述

app router 是 Next13 新推出的 file-system based router，是基於 server component 建立的。所有在 app 資料夾底下的 component 預設都是 server component，目前也只有 app router 可以使用 server component。

app router 與 page router 可以並存，但是兩個目錄不能同時建立一個路徑相同的路由，否則在 build time 時會報錯。並存的好處就是可以漸進式的從 page router migrate 至 app router，官網也很貼心的提供了手把手教學app-router-migration。

雖然與兩者都是 file-system based router，但是這兩個資料夾的結構差異很大，page router 更像是單純為了創建 router 而生的資料夾，裡面所有的檔案不是 router，就是裝著 router 的檔案夾(除了 root 會有一些 _layout.tsx 之類的檔案)。

app router 則包含了更多功能性組件，像是 error boundary, loading, layout，這些不是路由本身，卻很常與路由一起建立。

建立路由

在 app router 中建立 router 需要在 app (子)目錄中添加 page.tsx | page.jsx | page.js | page.ts 就可以根據該目錄的路徑添加一個路由，與 page router 一樣，一個檔案夾就是一個路由。

檔案路徑對上路由的範例：

• app/page.tsx：建立 / 路由
• app/dashboard/page.tsx：建立 /dashboard 路由
• app/dashboard/index.tsx：因為檔名不是 page ，所以只是一個普通的 component

特殊組件

app router 有為特定組件預留保留字，像是建立以 page 為名稱的組件，會被視為一個 router 的主頁面。
目前保留字如下：

Component 結構

在同一個目錄底下建立特殊組件，component 結構會如下圖所示。
由最外層到最內層分別是 Layout, Template, Error Boundary with Error, Suspense with Loading, Error Boundary with NotFound, Page

每一個目錄底下都可以建立所有特殊組件，在使用 Nested Route 時，只會把父層的 page 組件置換成子層目錄的 Layout, Template, Error Boundary with Error, Suspense with Loading, Error Boundary with NotFound, Page。

父層目錄的 Layout, Template, Error Boundary with Error, Suspense with Loading, Error Boundary with NotFound 全都還會在，這也是為什麼上面某些組件可以與子目錄組件共享。

你真的了解了嗎

這裡出一個簡單的問題考大家～在底下的資料夾結構當中

Q1: /about throw error 時會顯示什麼 UI
Q2: /profile throw error 時會顯示什麼 UI
Q3: 訪問 /about/me 時會顯示什麼 UI

知道的可以在底下留言給我~

└── app
    ├── error.tsx 
    ├── layout.tsx 
    ├── not-found.tsx 
    ├── about
    │   └── error.tsx 
    │   └── page.tsx 
    │   └── me
    │       └── index.tsx
    ├── page.tsx  
    └── profile
        └── not-found.tsx
        └── page.tsx

後記

原本把鐵人賽當筆記來寫，怎麼突然就出起題目來了...

參考資料

• Next - app-router-migration
• Next - routing