# 【Next.js】Multiple Root Layouts 當你想在 **Next.js App Router** 中讓不同的頁面使用 **不同的根 layout（Multiple Root Layouts）**，你可以透過「**路由分組（Route Groups）**」來達成。 這是一種官方推薦的做法，可以讓你做到： > ✨ **不同路由區段有不同的外框架（Header、Sidebar、樣式主題...）**，互不影響。 --- ## ✅ 為什麼需要 Multiple Root Layouts？ 你可能有這些需求：
區塊特性
`/`使用全站基本 layout
`/admin`使用管理後台 layout（含側邊欄）
`/auth`不需要 layout，例如登入頁
--- ## 🎯 解法：使用 Route Groups 分離 layout ### ✅ 語法關鍵：`(group-name)` ← 這是 **Route Group** 它： - ✅ 不會出現在 URL 中 - ✅ 可以定義自己的 `layout.tsx` - ✅ 可以做到多個「Root Layout」共存 --- ## 📁 範例結構：三個 Root Layouts ``` app/ ├── (site)/ │ ├── layout.tsx ← 公開區域 layout │ ├── page.tsx ← `/` │ └── about/ │ └── page.tsx ← `/about` │ ├── (admin)/ │ ├── layout.tsx ← 管理區 layout（有側邊欄） │ └── dashboard/ │ └── page.tsx ← `/dashboard` │ ├── (auth)/ │ ├── layout.tsx ← 登入註冊 layout（極簡） │ └── login/ │ └── page.tsx ← `/login` ``` --- ## 🧩 每個 layout.tsx 都是**自己的根 layout** ### `app/(site)/layout.tsx`： ```tsx export default function SiteLayout({ children }: { children: React.ReactNode }) { return (
網站主選單
{children}
); } ``` --- ### `app/(admin)/layout.tsx`： ```tsx export default function AdminLayout({ children }: { children: React.ReactNode }) { return (
{children}
); } ``` --- ### `app/(auth)/layout.tsx`： ```tsx export default function AuthLayout({ children }: { children: React.ReactNode }) { return ( {children} {/* 沒有 header/footer */} ); } ``` --- ## 📌 注意事項
問題說明
Group 名稱會出現在網址嗎？❌ 不會出現，只是用來分開 layout 結構
可以混用 layout 嗎？✅ 每個 group 是獨立 root layout
可以共用 components 嗎？✅ 沒問題，只要透過 import 即可
--- ## 🧠 小結
技術說明
Route Group `(xxx)`幫你在不改網址的前提下拆分 layout 結構
Multiple Layouts實現不同頁面區塊有各自獨立外觀、結構
頁面掛在哪個 group 就用哪個 layout完全分離，互不影響