Next.js 14（App Router）如何分离登录注册与主应用布局？

你可以利用Next.js App Router的路由分组和嵌套布局特性，实现登录注册布局与主应用布局的完全分离，同时保留根布局的公共配置（比如全局Providers、html/body标签）。具体步骤如下：

1. 创建路由分组 #

把页面按布局类型拆分到两个路由组中：

• 主应用相关页面（比如你的overview）放到app/(main)目录下
• 登录、注册页面放到app/(auth)目录下

路由组的括号()不会影响最终的URL路径，(main)/overview对应的URL还是/overview，(auth)/login对应的URL是/login，完全符合业务需求。

2. 为每个路由组添加专属布局 #

主应用布局（app/(main)/layout.js） #

这里放置主应用的公共组件（比如导航栏、侧边栏），所有(main)组内的页面都会自动套用这个布局：

export default function MainLayout({ children }) {
  return (
    <div className="main-app-wrapper">
      {/* 主应用公共组件示例 */}
      <nav className="main-nav">主应用导航</nav>
      <aside className="sidebar">侧边栏</aside>
      <main className="content">
        {children}
      </main>
    </div>
  );
}

把你原来的overview页面移到app/(main)/overview/page.js即可。

登录注册布局（app/(auth)/layout.js） #

这里放置登录注册页面的专属布局（比如简洁的卡片容器、背景样式），不会包含主应用的导航等元素：

export default function AuthLayout({ children }) {
  return (
    <div className="auth-page-wrapper">
      {/* 登录注册公共样式/组件示例 */}
      <div className="auth-card">
        {children}
      </div>
    </div>
  );
}

然后创建app/(auth)/login/page.js和app/(auth)/register/page.js，这两个页面会自动使用AuthLayout。

3. 保留根布局的公共配置 #

你的根布局app/layout.js保持不变，它会作为最外层布局包裹所有路由组的内容，负责全局的Providers、html/body等公共设置：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={rubik.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

这样设置后，访问主应用页面（比如/overview）时会加载RootLayout -> MainLayout -> OverviewPage，访问登录注册页面时会加载RootLayout -> AuthLayout -> Login/RegisterPage，两个布局完全独立，不会互相重叠。

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