事象

• Next.jsのSSRアプリケーションでStyled-componentsが適用されない

エラーメッセージ

Warning: Prop `className` did not match. Server: "sc-eDWCr gHhIrJ" Client: "sc-eDvSVe jXCRWx" 

原因

• サーバー側とクライアント側で生成されるクラス名が異なるため、スタイルが適用されない

解決方法

• babel-plugin-styled-componentsをインストール

npm install --save-dev babel-plugin-styled-components

• .babelrcを配置

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