🔨
Warning: Prop className did not match.
🔨

Warning: Prop className did not match.

問題

NextJSでstyled componentsを使用すると、 Warning: Prop className did not match. というエラーメッセージとともにスタイルが壊れます。
 

問題を解決する

Warning: Prop `className` did not match. when using styled components with semantic-ui-react
The main reason I am posting this answer to help people understand the tradeoff. When we're using .babelrc in next project it's going to opt of SWC compiler which is based on Rust ( Learn More). It's going to show message something like this when you opt for custom bable config.
Warning: Prop `className` did not match. when using styled components with semantic-ui-react
https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman
Warning: Prop `className` did not match. when using styled components with semantic-ui-react
 

解決方法 1

next.config.js ファイルに以下のコードを追加し、サーバーを再起動します。
module.exports = {
  compiler: {
    styledComponents: true,
  },
}
 

解決方法 2

プロジェクトのデフォルトフォルダに.babelrc ファイルを生成し、以下のコードを追加します。
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
 
.babelrcプラグインが重複している場合は、以下のように入れます。
{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg", ["styled-components", {"ssr": true}]]
}