NextJS 13项目RootLayout未生效：原因排查与启用方法

关键摘要 #

我在一个早期基础NextJS项目中尝试使用RootLayout，但对该文件的修改（包括删除）都不会影响页面渲染效果。

详细情况 #

我通过以下命令按照NextJS文档生成了NextJS 13项目：

npx create-next-app@latest

生成的文件结构如下：

src
- app
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- pages
  - example-page.tsx

src/app/layout.tsx中定义了RootLayout组件，包含html和body标签，并传入{children}。默认代码如下：

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

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

NextJS文档明确说明，app/layout.tsx中的RootLayout是应用所有路由/页面的基础布局，文档描述如下：

最顶层的布局称为根布局（Root Layout）。这个必填布局会在应用的所有页面中共享。根布局必须包含html和body标签。

但实际使用中，我发现这个RootLayout完全没被使用。最初是在尝试添加应用级Context时发现问题的，代码如下：

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

排查时我发现，即使在RootLayout里加个简单的div，也不会出现在example-page.tsx的渲染结果中。比如下面的代码，我期望浏览器能显示“Test div”的文本，但实际看不到：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* 这个div完全不会在浏览器中渲染 */}
        <div>Test div</div>
        {children}
      </body>
    </html>
  )
}

我甚至直接删除了layout.tsx，本以为构建或运行会报错，但应用依然正常运行。

我的问题 #

• 为什么我的RootLayout没有被使用？
• 如何让NextJS 13应用启用RootLayout？
• 如果RootLayout没被使用，且我没有创建其他自定义布局，NextJS是从哪里获取基础的html和body模板来渲染页面的？

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