Next.js生产构建页面加载后瞬间消失，开发环境正常

数据老陈

2026-7-13

Next.js 构建后页面加载即消失的问题排查与解决

问题根源

你的RootLayout违反了Next.js App Router的核心要求：根布局必须包含<html>和<body>标签。当前代码直接返回<div>作为根元素，导致构建后React无法正确挂载到文档DOM节点，触发一系列DOM操作错误（如appendChild/removeChild失败）以及React的418、423压缩错误（本质是根组件结构不符合规范）。

修复方案

修改layout.tsx，将根结构包裹在<html>和<body>标签内，这是App Router强制要求的根布局结构：

import './globals.css'
import type { Metadata } from 'next'
import Navbar from '../components/Navbar'
import Image from 'next/image'

export const metadata: Metadata = {
  title: 'redacted',
  description: 'Personal Website',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="relative">
        <div className="-z-1 bg-night absolute inset-0">
          <div className="fixed w-screen h-screen pointer-events-none bg-scroll">
            <Image src="/bg-circle.png" alt="" fill objectFit="cover" />
          </div>
        </div>
        <div className='flex justify-center'>
          <div className="fixed z-10 w-2/5">
            <Navbar />
          </div>
        </div>
        
        <div className="relative z-0">{children}</div>
      </body>
    </html>
  )
}