# 【Next.js】Route Groups

在 Next.js 的 **App Router** 架構中，`Route Groups` 是一個非常實用的功能，用來：

> ✅ **分組路由檔案，但不會影響 URL 路徑或頁面路由**。

---

## 🗂️ Route Groups 是什麼？

**語法：用括號 () 包住資料夾名稱**

例如：

```
app/
├── (dashboard)/
│   └── analytics/
│       └── page.tsx    ← URL: /analytics（不會變成 /dashboard/analytics）

```

### ✅ 路徑中的 `(dashboard)` 不會出現在網址上

但它**可以讓你組織頁面、套用 layout**。

---

## 📌 使用場景

<table id="bkmrk-%E4%BD%BF%E7%94%A8%E7%9B%AE%E7%9A%84-%E8%AA%AA%E6%98%8E-%E7%B5%84%E7%B9%94%E9%A0%81%E9%9D%A2%E7%B5%90%E6%A7%8B-%E8%AE%93%E4%BD%A0%E7%9A%84-a"><thead><tr><th>使用目的</th><th>說明</th></tr></thead><tbody><tr><td>**組織頁面結構**</td><td>讓你的 app 資料夾更乾淨、更有結構</td></tr><tr><td>**不同區段共用不同 layout**</td><td>例如 (marketing)、(admin)、(auth) 區塊使用不同 layout</td></tr><tr><td>**不污染 URL**</td><td>URL 不包含 group 名稱，例如 `(admin)/users` → `/users`</td></tr></tbody></table>

---

## ✅ 範例 1：基本 Route Group

```
app/
├── (marketing)/
│   └── home/
│       └── page.tsx

```

**訪問路徑：** `/home` ✅  
**不會是：** `/marketing/home` ❌

---

## ✅ 範例 2：共用 layout 的 Route Group

```
app/
├── (auth)/
│   ├── layout.tsx       ← auth 區塊專用 layout
│   ├── login/
│   │   └── page.tsx     ← `/login`
│   └── register/
│       └── page.tsx     ← `/register`

```

👉 `/login` 和 `/register` 頁面都會套用 `(auth)/layout.tsx`

---

## ✅ 範例 3：巢狀 Route Groups

```
app/
├── (admin)/
│   ├── layout.tsx
│   └── users/
│       └── page.tsx       ← `/users`
├── (marketing)/
│   └── about/
│       └── page.tsx       ← `/about`

```

每個 group 都可以有自己專屬的 `layout.tsx`，但網址仍保持扁平化。

---

## 💡 搭配 `not-found.tsx`、`error.tsx`、`loading.tsx`

你可以在 group 中設：

```
app/
├── (admin)/
│   ├── layout.tsx
│   ├── not-found.tsx
│   ├── error.tsx
│   └── dashboard/
│       └── page.tsx

```

這樣 group 中的所有路由都會共用這些錯誤/狀態處理頁。

---

## 🚫 Route Groups 的注意事項

<table id="bkmrk-%E5%95%8F%E9%A1%8C-%E8%AA%AA%E6%98%8E-group-%E5%90%8D%E7%A8%B1%E4%B8%8D%E8%83%BD%E7%94%A8-%2F-"><thead><tr><th>問題</th><th>說明</th></tr></thead><tbody><tr><td>Group 名稱不能用 `/` 或 `-`</td><td>只能用括號與英文小寫（無實際路徑名稱）</td></tr><tr><td>不能與實體 URL 混用</td><td>`app/(admin)/users` 是 `/users`，**不是** `/admin/users`</td></tr><tr><td>沒有 `generateStaticParams()`</td><td>Route Group 自身不是 route，不能設 `page.tsx`</td></tr></tbody></table>

---

## ✅ 小結

<table id="bkmrk-%E7%89%B9%E6%80%A7-%E8%AA%AA%E6%98%8E-%E8%AA%9E%E6%B3%95-%28group-name"><thead><tr><th>特性</th><th>說明</th></tr></thead><tbody><tr><td>語法</td><td>`(group-name)/`</td></tr><tr><td>是否會影響 URL？</td><td>❌ 不會，純粹是分組與結構管理用途</td></tr><tr><td>支援 layout 嗎？</td><td>✅ 支援，可針對 group 套用專屬 layout</td></tr><tr><td>適合什麼用途？</td><td>管理大型專案，區分功能區域（如 admin/auth/marketing）</td></tr></tbody></table>

---