Next.js DOM渲染期间如何实现自定义加载屏替代空白白屏

你的猜测是对的，该效果的核心逻辑和React原生在index.html中写入加载器一致，就是在服务端返回的初始HTML中直接内置加载器的结构和样式，等React客户端水化完成后自动替换为实际页面内容，完全避免首屏白屏。以下分两种路由模式给出实现方案：

Pages Router 实现（基于_document.js） #

在pages目录下新建_document.js文件，直接在默认的根节点内写入初始加载器内容，React挂载时会自动覆盖该内容无需额外销毁逻辑：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head>
        {/* 内嵌加载器样式，避免外部CSS加载延迟 */}
        <style dangerouslySetInnerHTML={{__html: `
          #initial-loading {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            z-index: 99999;
          }
          .loading-logo {
            width: 80px;
            animation: pulse 1.2s ease-in-out infinite;
          }
          @keyframes pulse {
            0% { transform: scale(0.8); opacity: 0.7; }
            50% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.8); opacity: 0.7; }
          }
        `}} />
      </Head>
      <body>
        <div id="__next">
          {/* 初始加载器，React水化后会被自动替换 */}
          <div id="initial-loading">
            <img className="loading-logo" src="/你的品牌logo路径.png" alt="加载中" />
          </div>
        </div>
        <NextScript />
      </body>
    </Html>
  )
}

App Router 实现（Next.js 13+） #

如果使用App Router，直接在根布局app/layout.js中配置即可，无需自定义_document：

// 内嵌加载组件，服务端渲染时直接返回
function InitialLoading() {
  return (
    <div id="initial-loading" style={{
      position: 'fixed',
      inset: 0,
      display: flex;
      alignItems: 'center',
      justifyContent: 'center',
      background: '#ffffff',
      zIndex: 99999
    }}>
      <img src="/你的品牌logo路径.png" alt="加载中" style={{
        width: '80px',
        animation: 'pulse 1.2s ease-in-out infinite'
      }} />
      <style>{`
        @keyframes pulse {
          0% { transform: scale(0.8); opacity: 0.7; }
          50% { transform: scale(1); opacity: 1; }
          100% { transform: scale(0.8); opacity: 0.7; }
        }
      `}</style>
    </div>
  )
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 客户端未初始化时显示加载器，水化完成后显示实际内容 */}
        {typeof window === 'undefined' ? <InitialLoading /> : children}
      </body>
    </html>
  )
}

注意事项 #

• 加载器的样式和小体积资源（比如logo）尽量内嵌到HTML中，避免等待外部资源加载导致加载器延迟出现
• 如果需要实现路由切换时的加载效果，可以配合next/router（Pages Router）或next/navigation（App Router）的路由事件监听实现
• 可以根据你的品牌视觉调整加载动画样式、背景色等参数，匹配产品设计风格

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