【Next.js】Route Groups

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

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

---

🗂️ Route Groups 是什麼？

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

例如：

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

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

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

---

📌 使用場景

使用目的	說明
組織頁面結構	讓你的 app 資料夾更乾淨、更有結構
不同區段共用不同 layout	例如 (marketing)、(admin)、(auth) 區塊使用不同 layout
不污染 URL	URL 不包含 group 名稱，例如 (admin)/users → /users

---

✅ 範例 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 的注意事項

問題	說明
Group 名稱不能用 / 或 -	只能用括號與英文小寫（無實際路徑名稱）
不能與實體 URL 混用	app/(admin)/users 是 /users，不是 /admin/users
沒有 generateStaticParams()	Route Group 自身不是 route，不能設 page.tsx

---

✅ 小結

特性	說明
語法	(group-name)/
是否會影響 URL？	❌ 不會，純粹是分組與結構管理用途
支援 layout 嗎？	✅ 支援，可針對 group 套用專屬 layout
適合什麼用途？	管理大型專案，區分功能區域（如 admin/auth/marketing）

---