Next.jsでclassNameが見つからなくなるバグの対処方

はじめに

Next.js + styled-component でホットリロードあり(npm run dev)で開発を行っているとスタイルを修正した際に下記のエラーが発生した。

index.js:1 Warning: Prop `className` did not match. Server: "文字列" Client: "文字列"

原因

スタイルを修正した際にローカルサーバー側では新しいCSSが作られるが(この時点でclass名が変わってしまう)、
クライアント側のHTMLが指定しているclassは変更前にビルドされた物なのでclass名が異なってしまいエラーが発生する。

解決方法

Ref: https://github.com/zeit/next.js/issues/7423

プロジェクトのrootディレクトリに .babelrc を作成し下記を記述したら解決した。
(すでに.babelrcが存在する場合は下記の内容を追記)

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

最後に

間違いや動かない等があれば、コメントください。