跳到主內容

【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 (
    <html>
      <body>
        <header>網站主選單</header>
        <main>{children}</main>
        <footer>頁尾</footer>
      </body>
    </html>
  );
}

app/(admin)/layout.tsx：

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <aside>後台選單</aside>
        <section>{children}</section>
      </body>
    </html>
  );
}

app/(auth)/layout.tsx：

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children} {/* 沒有 header/footer */}
      </body>
    </html>
  );
}

📌 注意事項

問題 說明
Group 名稱會出現在網址嗎？ ❌ 不會出現，只是用來分開 layout 結構
可以混用 layout 嗎？ ✅ 每個 group 是獨立 root layout
可以共用 components 嗎？ ✅ 沒問題，只要透過 import 即可

🧠 小結

技術 說明
Route Group (xxx) 幫你在不改網址的前提下拆分 layout 結構
Multiple Layouts 實現不同頁面區塊有各自獨立外觀、結構
頁面掛在哪個 group 就用哪個 layout 完全分離，互不影響

 

回到頂端