Next.js 13布局页面Body在Header前渲染问题求助

问题根源 #

你的RootLayout结构违反了HTML规范：<html>标签的直接子元素只能是<head>和<body>，你将<Header>和<Footer>直接放在<html>下、<body>之外，浏览器会自动修正这种无效DOM结构，导致组件渲染顺序错乱。

修复方案 #

将Header和Footer组件移入<body>标签内部，调整后的layout.tsx代码如下：

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Header from '@/components/layout/header'
import Footer from '@/components/layout/footer'
const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Panawerse Dao Next 13',
  description: 'Generated by Saleh',
}

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

原理说明 #

Next.js 13的RootLayout最终会渲染为标准HTML页面，必须严格遵循HTML结构规则。<html>的合法直接子元素仅包含<head>（由Next.js根据你定义的metadata自动生成）和<body>，所有可视化的页面内容都应该嵌套在<body>内部，这样浏览器才能按照预期的顺序渲染组件。

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