Next.jsでSVGのレンダリングエラーになったときの解決方法

date

Jan 3, 2023

repo_url

slug

svg-rendering-error

status

Published

summary

type

Post

thumbnail_url

tags

nextjs

typescript

outer_link

ダークモードの切り替えボタン用にheroiconsを使用したのですが、コンソールエラーが出ました。

以下が該当のコードです。テーマによってアイコンを出し分けています。（色々省略してあります）。

<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
  {theme === 'light' ? <MoonIcon/> : <SunIcon/>}
</button>

以下がエラー内容

Warning: Prop d did not match

色んな記事を漁った結果、以下の記事で解決できました。

🚨 Warning: Prop `d` did not match.

Next.js를 사용할 때 즉, SSR을 하는 경우에 localstorage의 변수를 이용해서 svg 를 렌더링할 때 발생하는 경고인 것 같습니다. 결국 SSR에서 localstorage 에 접근하는 것이 문제이므로 클라이언트 측에서 렌더링 되도록 만들면 경고가 없어집니다. 아래 코드의 핵심은 useEffect() 를 이용해서 클라이언트 측에서 렌더링 되고 나서 아이콘을 렌더링하도록 조건을 넣어준 것입니다.

https://velog.io/@1-blue/Warning-Prop-d-did-not-match

原因

Next.jsでSSRする場合、SVGのレンダリングにlocalStorageの変数を用いるらしく、 SSRでlocalStorageを使うのはよろしくないよね、ということでエラーを吐くそう。

対策

useEffectを利用して、クライアントサイドでレンダリングされてからSVGアイコンをレンダリングさせる。

const [loaded, setLoaded] = useState(false);
useEffect(() => {
  setLoaded(true);
}, [setLoaded]);

//...

<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
  {loaded && theme === 'light' ? <MoonIcon/> : <SunIcon/>}
</button>

補足

調べている途中で直接的な答えにはなっていませんでしが、今後起こりうるかなと思い残しておきます。

[Next.js]Error: Text content does not match server-rendered HTML. の原因と対処法

コード内でクラス名やテキストの出し分けをしていると、レンダー時とクライアント側でコードが一致しませんといったエラーが表示されました。デプロイ後はエラーは関係ないようですが、開発時には邪魔すぎるので対処していこうと思います。 Unhandled Runtime Error Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error 今回はURLパラメーターに応じて出力を出し分けしようとしたところ、パラメーター設置時の出力内容がレンダー時のものと違うことでエラーが出たようです。該当箇所にsuppressHydrationWarningを付けることでエラーが発生しなくなります。コードを調整することでの解消もできますが、局所的に使う分には良いかなと思っています。何度か起きていて、記事を探すのが面倒でとりあえずまとめておきました。 ReactでDateに関してWarning: XXX did not match.になるとき

https://weev.media/article/717

[Next.js]Error: Text content does not match server-rendered HTML. の原因と対処法