Next.js使用時にrecoil-persistのStorageを変更する
Next.js + Recoilの利用時に、ページをリロードしても状態を保持しておきたかったのでrecoil-persistを使って永続化することにした。
recoil-persistはデフォルトだとlocalStorageに保存されるが、storageオプションを設定することで任意のStorageを利用することができる。
recoilPersist({
key: 'recoil-persist',
storage: sessionStorage,
})ただし、↑の設定をした場合にNext.jsだとサーバ側でPre-renderingが行われるため、windowオブジェクトが存在せず↓のエラーが発生する。
ReferenceError: sessionStorage is not definedそこで、↓のようにしてクライアント側で実行された場合のみstorageを指定するようにした。
recoilPersist({
key: 'recoil-persist',
storage: typeof window === 'undefined' ? undefined : window.sessionStorage,
})これでatomの値をsessionStorageに保存できるようになった。