Next.js×styled-componentsで、スタイル変更したときにWarning: Prop className did not matchになるエラー

解決法

1. babel-plugin-styled-componentsをyarn add
2. .babelrcをプロジェクトルートに作成し、以下のように設定

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

備考

下記も試しましたが、うまくいきませんでした。
（yarn devし直すとエラーは一時的に消えるが、再びスタイルを変更するとエラーが出た）

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

参考