Next.jsでReactのライブラリを使用すると、実行時コンソールにこの様なエラーが出ることがある。

これは、Next.jsで行なっているSSR(サーバーサイドレンダリング)によって、サーバー側でプリレンダリングされたプロパティと、クライアント(ブラウザ)側でレンダリングされたプロパティが異なることが原因。

対処法

エラーを出しているライブラリをdynamic importする。

dynamic importはクライアントで任意のタイミングでライブラリを読み込むことができるJavaScriptの機能。

今回私は、react-selectというライブラリのCreatableが原因でエラーが起こっていたため、それを改善している。

改善前

import Creatable from "react-select/creatable";

改善後

import dynamic from "next/dynamic";
const Creatable = dynamic(import("react-select/creatable"), { ssr: false });