Next.js 12.3.1搭配styled-components 5.3.6样式加载延迟问题求助

环境版本 #

"next": "12.3.1",
"styled-components": "^5.3.6"

问题 #

本地页面刷新时，会有约1秒的时间显示无样式的HTML元素，之后样式才加载完成。已在next.config.js中配置styled-components编译器选项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

修复方案 #

1. 配置自定义_app文件以支持SSR样式注入 #

Next.js 12使用SWC编译styled-components时，需要在自定义_app.jsx/_app.tsx中处理服务端渲染的样式收集与注入，确保样式在页面初始加载时就已存在：

import { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function App({ Component, pageProps }) {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      <Component {...pageProps} />
    </StyleSheetManager>
  )
}

2. 清除Next.js缓存并重启服务 #

缓存可能导致样式注入异常，执行以下命令清理后重启开发服务器：

rm -rf .next
npm run dev

3. 验证生产环境表现 #

本地开发环境的热更新机制可能存在短暂闪烁，构建生产版本测试：

npm run build
npm run start

生产环境下SSR会正确注入样式，不会出现无样式元素闪烁的问题。

4. 排查冲突配置 #

确认next.config.js中没有禁用SSR、修改SWC配置等可能影响styled-components编译的选项，确保compiler.styledComponents始终为true。

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