Next.js使用Styled Components出现全局样式重复该如何解决？

问题原因 #

你遇到的全局样式重复是styled-components在Next.js服务端渲染场景下，客户端与服务端生成的样式标识不匹配，导致服务端已经注入的全局样式，客户端hydrate时又重复注入了一次。

解决方案 #

按顺序执行以下操作即可：

1. 补全babel插件配置
   你当前的.babelrc没有开启styled-components的服务端渲染匹配配置，修改配置如下：

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

2. 确认GlobalStyles定义规范
   检查你的GlobalStyles.js文件，确保全局样式只通过createGlobalStyle定义一次，不要包裹在额外的函数组件中重复生成实例，参考正确写法：

// 根目录GlobalStyles.js
import { createGlobalStyle } from 'styled-components'

export const GlobalStyles = createGlobalStyle`
  /* 你的全局样式代码 */
`

3. 清除缓存重启项目
   删除项目根目录下的.next缓存文件夹，重新执行npm run dev启动项目即可解决重复问题。

内容的提问来源于stack exchange，提问作者Ricardo de Paula