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に保存できるようになった。

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Next.js 11

手軽にアップグレードできた

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る その3

アウトライン化大事