如何分离NextJS App Router根布局与账户/管理员布局？

要实现网站和账户板块的布局隔离，核心是利用Next.js App Router的分组路由功能，它能让你在不改变URL结构的前提下，为不同板块设置独立布局。

步骤1：重构根布局 #

首先修改app/layout.js，把原来的Navbar移除，只保留最基础的全局结构（所有板块共享的html、body等）：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={poppins.className}>
        {children}
      </body>
    </html>
  );
}

步骤2：创建网站板块的分组路由与布局 #

在app目录下新建(site)文件夹（括号是分组路由的标识，不会出现在URL中）：

• 将原网站的所有页面（如首页page.js、关于页about/page.js等）移动到(site)文件夹内
• 在(site)下创建layout.js，添加网站专属的Navbar：

import Navbar from '@/components/Navbar';

export default function SiteLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
}

现在访问domain.tld时，会自动加载这个布局，显示网站的Navbar。

步骤3：创建账户板块的分组路由与布局 #

同样在app目录下新建(account)文件夹：

• 将原account/page.js移动到(account)内（或直接在(account)下创建page.js作为账户首页）
• 在(account)下创建layout.js，设置账户板块的专属布局（可以添加账户侧边栏，或完全不显示网站Navbar）：

// 可选：导入账户专属导航组件
// import AccountSidebar from '@/components/AccountSidebar';

export default function AccountLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="account-container">
      {/* <AccountSidebar /> */}
      <main className="account-content">{children}</main>
    </div>
  );
}

访问domain.tld/account时，会加载这个布局，完全不会显示网站的Navbar。

额外优化：账户板块权限验证 #

如果账户页面需要登录才能访问，可以在AccountLayout中添加服务器端权限校验（利用App Router的服务器组件特性）：

import { redirect } from 'next/navigation';
import { getCurrentUser } from '@/lib/auth'; // 替换成你的鉴权逻辑

export default async function AccountLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getCurrentUser();
  if (!user) {
    redirect('/login'); // 未登录则跳转到登录页
  }

  return (
    <div className="account-container">
      {/* <AccountSidebar /> */}
      <main className="account-content">{children}</main>
    </div>
  );
}

这样账户板块下的所有页面都会自动继承权限校验，无需重复编写逻辑。

内容的提问来源于stack exchange，提问作者Lexacle Technologies