【Next.js】路由機制

Next.js 使用檔案結構（File System Routing）搭配 page.tsx（或 page.jsx）自動產生路由，這是 Next.js 的一大特色，讓你不需手動寫 route config，只要建立檔案與資料夾就能對應 URL。

🗂️ Next.js App Router 的路由機制（以 app/ 為根）

app/

├── page.tsx → /

├── about/

│ └── page.tsx → /about

├── blog/

│ ├── page.tsx → /blog

│ └── [slug]/

│ └── page.tsx → /blog/hello、/blog/123

├── dashboard/

│ ├── layout.tsx → 包住 dashboard 所有子路由

│ ├── page.tsx → /dashboard

│ └── settings/

│ └── page.tsx → /dashboard/settings

🔑 路由對應邏輯

檔案名稱

對應路徑 (URL)

說明

app/page.tsx

/

首頁

app/about/page.tsx

/about

靜態路由

app/blog/[slug]/page.tsx

/blog/:slug

動態路由

app/dashboard/page.tsx

/dashboard

支援巢狀路由

app/dashboard/settings/page.tsx

/dashboard/settings

巢狀子頁面

📌 動態路由（Dynamic Routes）

範例：

app/product/[id]/page.tsx

訪問 /product/123、/product/abc 都會進到這個頁面。

如何在 component 中取得參數：

import { useParams } from 'next/navigation'

export default function ProductPage() {

 const params = useParams()

 return <div>商品 ID：{params.id}</div>

}

⛓️ 巢狀路由與 Layout 配合

app/

├── layout.tsx // 全站 layout

├── dashboard/

│ ├── layout.tsx // dashboard 專屬 layout

│ └── settings/

│ └── page.tsx // 會套用兩層 layout

➡ 這樣 /dashboard/settings 的畫面會被兩層 layout 包起來。

🚫 注意事項

限制

說明

page.tsx 為必要頁面進入點

每個路由至少需要一個 page.tsx

不支援動態 catch-all *

請使用 [...slug]

app/ 下不能使用 pages/

App Router 與 Pages Router 不能共存

✨ 小技巧

目的

實作方式

動態路由（product/:id）

app/product/[id]/page.tsx

可選參數（可有可無）

app/product/[[id]]/page.tsx

Catch-all 路由

app/docs/[...slug]/page.tsx

自定 metadata（如 title）

使用 export const metadata

✅ 結論

Next.js 的路由系統基於檔案結構：

目錄名代表 URL 路徑

page.tsx 是每個路由的「入口」

巢狀結構代表巢狀路由

使用 [] 定義動態路由

如果你有具體的頁面結構想設計，我可以幫你列出完整檔案路徑與對應 URL 對照表。