【Next】Next13でstyled-componentsを使うと出る「Prop className did not match」について

Next13でstyled-componentsを使うとこのエラーが発生し
公式通りに書いても解消できなかったので備忘録として残しておきます。

原因

NextjsはSSRでのプリレンダリングであるため、Reactのライブラリを使用すると
サーバサイドでレンダリングされた結果と、クライアントサイドでレンダリングされた結果のプロパティが一致しないことが原因らしい。

解決法

1. "use client"をつける

styled-componentsを使う際はuse clientが必要とのことなので
抜けていないか確認する。

2. Nextの設定を修正する

Nextでのレンダリングの問題になるのでNext.config.jsを以下のように書く。

Next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: {
      ssr:true
    },
  },
}

module.exports = nextConfig

今まではこれを書くと解決していたらしい。

Next13でも一旦はエラーが消えるのですが、リロードするとまた出てくる😕
それでも解決せず、色々実行してみるもエラーが消えなかったのですが
調べていくとやっと解決法を発見しました！

参考記事：
https://github.com/vercel/next.js/issues/46605

どうやらNext13になってからこのエラーが消えないことが多発しているらしい。

解決法はとてもシンプルで
styledを使用する際に補完機能の自動importで{}がついていたことが原因でした。
いままでのNextでは自動importでも{}がつかなかったらしいのになぜ・・・

具体的な例のコードをあげておきます。

src/components.Header.tsx

'use client'

- import { styled } from 'styled-components'
+ import styled from 'styled-components'

const HeaderStyle = styled.div`
  background-color: #89bcff;
  height: 120px;
  padding: 30px;
`

export const Header = () => {
  return <HeaderStyle />
}

このように書けば、エラーが消えていると思います！

あとがき

はじめてのstyled-componentsの使用だったので気づけなかったのですが
使っている人からすればすぐに気づく案件だったのでしょうか・・・

{}を使用しているときには、VSCode上ではエラーが出ておらず
{}を使用するとESLintさんに怒られるので余計にわかりにくかったです。

styled-componentsのバージョンを落としてみたり、
Next.configをいじったり、
いろいろ試してエラーが消えては喜んで、また同じエラーが出るといった感じだったので
結構苦労しました（感情的に。笑）