Next.js中Styled-Components样式加载延迟问题求助

这是典型的FOUC（无样式内容闪烁）现象，核心原因是服务端渲染时，Styled-Components的样式未被同步注入到服务端生成的HTML中，客户端加载完成后才动态生成样式，导致页面短暂显示无样式状态。以下是针对不同Next.js路由系统的解决方案：

针对Page Router（pages目录） #

1. 安装编译插件
   安装babel-plugin-styled-components以支持服务端渲染时的样式收集：

   npm install --save-dev babel-plugin-styled-components
   # 或 yarn add --dev babel-plugin-styled-components
   

2. 配置Babel
   在项目根目录创建.babelrc或babel.config.js，添加Styled-Components插件配置：

   {
     "presets": ["next/babel"],
     "plugins": [["styled-components", { "ssr": true }]]
   }
   

3. 自定义_document.js
   在pages目录下创建_document.js，用于在服务端收集并注入样式：

   import Document from 'next/document'
   import { ServerStyleSheet } from 'styled-components'
   
   export default class MyDocument extends Document {
     static async getInitialProps(ctx) {
       const sheet = new ServerStyleSheet()
       const originalRenderPage = ctx.renderPage
   
       try {
         ctx.renderPage = () =>
           originalRenderPage({
             enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
           })
   
         const initialProps = await Document.getInitialProps(ctx)
         return {
           ...initialProps,
           styles: (
             <>
               {initialProps.styles}
               {sheet.getStyleElement()}
             </>
           ),
         }
       } finally {
         sheet.seal()
       }
     }
   }
   

针对App Router（app目录，Next.js 13+） #

1. 安装并配置Babel（步骤同Page Router的1、2）

2. 创建Styled-Components注册组件
   在app/components目录下创建StyledComponentsRegistry.jsx：

   'use client'
   
   import { useServerInsertedHTML } from 'next/navigation'
   import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
   
   export default function StyledComponentsRegistry({ children }) {
     const sheet = new ServerStyleSheet()
   
     useServerInsertedHTML(() => {
       const styles = sheet.getStyleElement()
       sheet.seal()
       return <>{styles}</>
     })
   
     if (typeof window !== 'undefined') return <>{children}</>
   
     return <StyleSheetManager sheet={sheet}>{children}</StyleSheetManager>
   }
   

3. 在根布局中包裹应用
   修改app/layout.js（或layout.tsx），用注册组件包裹所有子内容：

   import StyledComponentsRegistry from './components/StyledComponentsRegistry'
   
   export default function RootLayout({ children }) {
     return (
       <html lang="zh-CN">
         <body>
           <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
         </body>
       </html>
     )
   }
   

额外注意事项 #

• 避免在客户端专属钩子（如useEffect）内定义Styled-Components组件，确保样式组件在服务端可访问。
• 开发模式下可能因热更新存在轻微闪烁，建议构建生产版本测试：

  npm run build && npm run start
  

• 检查是否有第三方异步加载的样式干扰，确保Styled-Components的配置优先级正确。

内容的提问来源于stack exchange，提问作者Josué Mendonça