next.jsでrecoilを永続化する方法
投稿日:2023/10/31
0. recoilの設定
1. recoilのインストール
1npm i recoil
2# or
3yarn i recoil
4# or
5pnpm i recoil2. RecoilRootでラップする
app/provider.tsx
1'use client'
2import { ReactNode } from "react";
3import { RecoilRoot } from "recoil";
4
5export default function AppProvider({ children }: { children: ReactNode }) {
6 return (
7 <RecoilRoot>{children}</RecoilRoot>
8 );
9}app/layout.tsx
1import { ReactNode } from "react";
2import { AppProvider } from "./provider";
3
4export default function RootLayout({ children }: { children: ReactNode }) {
5 return (
6 <html lang="ja">
7 <body>
8 <AppProvider>{children}</AppProvider>
9 </body>
10 </html>
11 );
12}3. atomの設定
1export const sampleAtom=atom({
2 key: 'sample',
3 default: 0,
4});1 Recoil-persistのインストール
1npm i recoil-persist
2# or
3yarn i recoil-persist
4# or
5pnpm i recoil-persist2. atomを編集する
1const { persistAtom } = recoilPersist({
2 key: "recoil-persist",
3 storage: typeof window === "undefined" ? undefined : localStorage // or settionStorage
4});
5export const sampleAtom=atom({
6 key: 'sample',
7 default: 0,
8 effects_UNSTABLE: [persistAtom]
9});最後に
このようにして簡単にrecoilを永続化できます。これを使えば、next.js製のアプリで簡単に設定を保存する機能などを追加できます。