# 【Next.js】路由機制

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

---

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

```bash
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

```

---

## 🔑 路由對應邏輯

<table id="bkmrk-%E6%AA%94%E6%A1%88%E5%90%8D%E7%A8%B1-%E5%B0%8D%E6%87%89%E8%B7%AF%E5%BE%91-%28url%29-%E8%AA%AA%E6%98%8E-a"><thead><tr><th>檔案名稱</th><th>對應路徑 (URL)</th><th>說明</th></tr></thead><tbody><tr><td>`app/page.tsx`</td><td>`/`</td><td>首頁</td></tr><tr><td>`app/about/page.tsx`</td><td>`/about`</td><td>靜態路由</td></tr><tr><td>`app/blog/[slug]/page.tsx`</td><td>`/blog/:slug`</td><td>動態路由</td></tr><tr><td>`app/dashboard/page.tsx`</td><td>`/dashboard`</td><td>支援巢狀路由</td></tr><tr><td>`app/dashboard/settings/page.tsx`</td><td>`/dashboard/settings`</td><td>巢狀子頁面</td></tr></tbody></table>

---

## 📌 動態路由（Dynamic Routes）

### 範例：

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

```

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

### 如何在 component 中取得參數：

```tsx
import { useParams } from 'next/navigation'

export default function ProductPage() {
  const params = useParams()
  return <div>商品 ID：{params.id}</div>
}

```

---

## ⛓️ 巢狀路由與 Layout 配合

```bash
app/
├── layout.tsx             // 全站 layout
├── dashboard/
│   ├── layout.tsx         // dashboard 專屬 layout
│   └── settings/
│       └── page.tsx       // 會套用兩層 layout

```

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

---

## 🚫 注意事項

<table id="bkmrk-%E9%99%90%E5%88%B6-%E8%AA%AA%E6%98%8E-page.tsx-%E7%82%BA%E5%BF%85%E8%A6%81%E9%A0%81%E9%9D%A2"><thead><tr><th>限制</th><th>說明</th></tr></thead><tbody><tr><td>`page.tsx` 為必要頁面進入點</td><td>每個路由至少需要一個 `page.tsx`</td></tr><tr><td>不支援動態 catch-all `*`</td><td>請使用 `[...slug]`</td></tr><tr><td>`app/` 下不能使用 `pages/`</td><td>App Router 與 Pages Router 不能共存</td></tr></tbody></table>

---

## ✨ 小技巧

<table id="bkmrk-%E7%9B%AE%E7%9A%84-%E5%AF%A6%E4%BD%9C%E6%96%B9%E5%BC%8F-%E5%8B%95%E6%85%8B%E8%B7%AF%E7%94%B1%EF%BC%88product"><thead><tr><th>目的</th><th>實作方式</th></tr></thead><tbody><tr><td>動態路由（product/:id）</td><td>`app/product/[id]/page.tsx`</td></tr><tr><td>可選參數（可有可無）</td><td>`app/product/[[id]]/page.tsx`</td></tr><tr><td>Catch-all 路由</td><td>`app/docs/[...slug]/page.tsx`</td></tr><tr><td>自定 metadata（如 title）</td><td>使用 `export const metadata`</td></tr></tbody></table>

---

## ✅ 結論

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

- **目錄名代表 URL 路徑**
- **`page.tsx` 是每個路由的「入口」**
- **巢狀結構代表巢狀路由**
- **使用 `[]` 定義動態路由**

---

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