跳到主內容

【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 對照表。

回到頂端