🌊
Next.jsでライブラリ使用中にHydration Errorエラーが起きる時の対処法
Next.jsで開発しているとよく起こる Hydration Error。
そもそも通常のReactのライブラリはSSRを想定して作られていないので、
対応していないとハイドレーションエラーになることがあります。
今回は、Next.js環境下で、react-selectを使用時に、謎のエラーが発生しました。
PRは作成されているのですが、マージがされていない。。
selectboxはクライアントサイドだけで描画されてくれればいいので、
とりあえず以下のように dynamic import で対応。
非同期のimportと描画が終わるまで、一瞬領域が空になってしまうので、
loadingにフォールバックの要素を設定してあげましょう。
selectbox.jsx
'use client'
import dynamic from 'next/dynamic'
const Select = dynamic(() => import('react-select'), {
ssr: false,
loading: () => <div className='flex h-full items-center'>...loading</div>,
})
export function SelectBox({ options, instanceId, ...props }) {
return (
<div className='h-[40px]'>
<Select
{...props}
options={options}
name={instanceId}
instanceId={instanceId}
/>
</div>
)
}
Discussion