Next.js 13使用Antd 5页面重载时CSS样式加载延迟问题求解

• 全局样式正确导入
  在app目录的根layout.tsx文件顶部直接导入Antd的重置样式，确保样式在SSR阶段就被注入：

  import 'antd/dist/reset.css';
  import './globals.css'; // 自定义全局样式需放在Antd样式之后
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    );
  }
  

• 配置Antd CSS-in-JS的SSR支持
  安装@ant-design/cssinjs依赖，通过SWC编译配置和样式提供者确保服务端渲染时样式正确生成：

  1. 安装依赖：

     npm install @ant-design/cssinjs
     

  2. 修改next.config.js：

     const nextConfig = {
       transpilePackages: ['antd', '@ant-design/cssinjs'],
       experimental: {
         optimizeCss: true,
       },
     };
     module.exports = nextConfig;
     

  3. 更新根layout.tsx：

     import { StyleProvider } from '@ant-design/cssinjs';
     import 'antd/dist/reset.css';
     import './globals.css';
     
     export default function RootLayout({ children }: { children: React.ReactNode }) {
       return (
         <html lang="zh-CN">
           <body>
             <StyleProvider>{children}</StyleProvider>
           </body>
         </html>
       );
     }
     

• 确保组件SSR渲染
  若使用dynamic导入Antd组件，必须显式设置ssr: true，避免仅客户端加载导致的样式延迟：

  import dynamic from 'next/dynamic';
  
  const DatePicker = dynamic(() => import('antd/es/date-picker'), { ssr: true });
  

• 调整自定义样式加载顺序
  所有自定义全局样式、组件样式都要放在Antd官方样式之后导入，避免样式优先级冲突引发布局错乱。

• 排查CSS模块化冲突
  若项目使用CSS模块化，需避免与Antd全局样式的类名冲突，建议改用CSS-in-JS方案（如Antd自带的style属性）编写自定义样式，减少样式加载时的冲突问题。

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