英文:
Exclude a page from the Next.js root layout in the app folder
问题
我有一个根布局 /app/layout.tsx 和认证页面。我希望认证页面不要使用根布局，所以我在 /app/auth/layout.tsx 文件中为它们定义了一个自定义布局。但是根布局(/app/layout.tsx) 包裹了自定义布局(/app/auth/layout.tsx)。我该如何将认证页面和子页面排除在根布局之外？
我尝试将认证目录名称放在 () 中，例如 (auth)，但没有效果。大多数解决方案是针对页面路由（Pages Router），不适用于应用路由（App Router）。
我正在使用 Next.js 13.4 版本。
英文:
I have a root layout /app/layout.tsx and authentication pages. I want the authentication pages NOT to get the root layout, and I defined a custom layout for them in the /app/auth/layout.tsx file.
But the root layout(/app/layout.tsx) wraps the custom layout(/app/auth/layout.tsx). How can I exclude the auth pages and sub-pages from getting the root layout?
I tried putting the auth dir name in () as (auth) but not working. Most of the solution are for the Pages Router and doesn't work for App Router.
I'm using Next.js 13.4.
答案1
得分: 11
以下是翻译好的内容：
在 Next.js 的 app 目录中，当使用 Create React App 或 Vite 时，将根布局视为 index.html 文件。您的组件应该在这里渲染。这就是为什么需要定义 html 和 body 标签，正如 文档 所述：
app目录必须包括一个根app/layout.js。
根布局必须定义<html>和<body>标签。
此外，任何父布局都会包装所有嵌套的路由布局。如果您的应用程序的不同部分应该不同，您可以使用 路由组 创建 多个根布局：
要创建多个根布局，请删除顶级的
layout.js文件，并在每个路由组中添加一个layout.js文件。这对于将应用程序划分为具有完全不同 UI 或体验的部分非常有用。需要在每个根布局中添加<html>和<body>标签。
在上面的示例中，(marketing) 和 (shop) 都有自己的根布局。
您可以例如将 marketing 替换为 general，将 shop 替换为 auth。顺便说一下，路由组的命名除了用于组织之外没有特殊意义。它们不会影响 URL 路径。
此外，路由组内的路由不应解析为相同的 URL 路径。例如，由于路由组不影响 URL 结构，(marketing)/about/page.js 和 (shop)/about/page.js 都将解析为 /about 并引发错误。
英文:
In the app directory of Next.js, view the root layout as the index.html file when using Create React App or Vite. Your components should render there. This is why it's required and should define html and body tags, as the doc says:
>The app directory must include a root app/layout.js.
The root layout must define <html> and <body> tags.
Also, any parent layout wraps all nested route layouts. If different parts of your application should be different, you can, using Routes Groups, create multiple root layouts:
>To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each route groups. This is useful for partitioning an application into sections that have a completely different UI or experience. The <html> and <body> tags need to be added to each root layout.
>In the example above, both (marketing) and (shop) have their own root layout.
You can, for example, replace marketing with general, and shop with auth. Side note, the naming of route groups has no special significance other than for organization. They do not affect the URL path.
Also, routes inside route groups should not resolve to the same URL path. For example, since route groups don't affect URL structure, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.
答案2
得分: 1
当我移除顶层的layout.js时，我收到以下错误信息：找不到模块：无法解析'C:\Users\falac\Desktop\frontend\ProjectsInGit\blog-tests\src\app\layout.js'
如果你遇到与我相同的问题，你可以尝试以下步骤来解决它：
- 停止项目。
- 删除“.next”文件夹。
- 重新启动项目。
英文:
When I remove the top-level layout.js I receive: Module not found: Can't resolve 'C:\Users\falac\Desktop\frontend\ProjectsInGit\blog-tests\src\app\layout.js'
If you encounter the same issue as mine, you can try the following steps to resolve it:
- Stop the project.
- Delete the ".next" folder.
- Restart the project.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论