【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：
export default function SiteLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
app/(admin)/layout.tsx：
export default function AdminLayout({ children }: { children: React.ReactNode }) {
return (
);
}
app/(auth)/layout.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
完全分離，互不影響