Next.js 13集成Ant Design 5：样式加载前渲染致页面跳动求助

你当前的配置已经生成了Ant Design的静态CSS，但样式加载时机的问题导致了初始渲染时的页面跳动，以下是几个可行的解决方案：

方案1：在_document.tsx中提前注入全局样式（优先推荐） #

将Antd静态CSS的引入从App.tsx移到_document.tsx中，确保样式在页面初始HTML渲染时就被加载，避免后续样式滞后导致的布局偏移。

创建或修改pages/_document.tsx（如果是App Router则修改app/layout.tsx对应的head部分）：

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

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 直接引入预先生成的antd.min.css */}
          <link rel="stylesheet" href="/antd.min.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

同时删除App.tsx中的import '../public/antd.min.css';语句。

方案2：启用Next.js的CSS优化配置 #

开启Next.js的CSS优化功能，让框架自动提取首屏关键CSS（Critical CSS），优先加载首屏所需样式，减少布局跳动。

修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // Pages Router 配置
  optimizeCss: true,
  // 若使用Next.js 13+ App Router，替换为下面的配置
  // experimental: {
  //   optimizeCss: true,
  // },
};

module.exports = nextConfig;

方案3：添加骨架屏占位 #

如果上述方案仍存在细微的布局偏移，可以给页面或组件添加骨架屏，在样式加载完成前显示占位结构，让用户感知不到跳动。

示例页面组件：

import { Skeleton } from 'antd';
import { useState, useEffect } from 'react';

export default function HomePage() {
  const [isStyleLoaded, setIsStyleLoaded] = useState(false);

  useEffect(() => {
    // 监听antd样式文件加载完成
    const styleLink = document.querySelector('link[href="/antd.min.css"]');
    if (styleLink) {
      styleLink.onload = () => setIsStyleLoaded(true);
    } else {
      // 若样式已存在，直接标记为加载完成
      setIsStyleLoaded(true);
    }
  }, []);

  if (!isStyleLoaded) {
    // 模拟页面结构的骨架屏
    return <Skeleton active style={{ width: '100%', minHeight: '100vh' }} />;
  }

  // 实际页面内容
  return (
    <div className="page-container">
      <h1>首页内容</h1>
      {/* 你的Ant Design组件 */}
    </div>
  );
}

额外检查项 #

• 确认predev和prebuild命令是否正常执行，生成的public/antd.min.css文件内容是否完整（可以直接打开文件查看是否包含Ant Design的基础样式）。
• 若使用Next.js 13+ App Router，确保在根layout.tsx中正确配置StyleProvider，并将样式引入放在head组件内。

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