从应用程序文件夹中的 Next.js 根布局中排除页面

Question

我有一个根布局

/app/layout.tsx

和身份验证页面。我不希望身份验证页面获得根布局，并且我在

/app/auth/layout.tsx

文件中为它们定义了自定义布局。

但是根布局（

/app/layout.tsx

）包裹了自定义布局（

/app/auth/layout.tsx

）。如何从获取根布局中排除授权页面和子页面？

我尝试将 auth 目录名称作为

()

放在

(auth)

中，但没有用。大多数解决方案适用于Pages Router，不适用于App Router。

我正在使用 Next.js

13.4

.

Answer 1

在Next.js的

app

目录下，使用Create React App或Vite时查看根布局为

index.html

文件。您的组件应该在那里呈现。这就是为什么它是必需的，并且应该定义

html

和

body

标签，正如 doc 所说：

app
目录必须包含一个根
app/layout.js
。根布局必须定义
<html>
和
<body>
标签。

如果您需要应用程序的不同部分应该不同，您可以使用Routes Groups，创建多个根布局：

要创建多个根布局，请删除顶级
layout.js
文件，并在每个路由组中添加一个
layout.js
文件。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。
<html>
和
<body>
标签需要添加到每个根布局。

在上面的例子中，（营销）和（商店）都有自己的根布局。

例如，您可以将

marketing

替换为

general

，将

shop

替换为

auth

。旁注，

(...)

文件夹不会影响 URL。