Next.js 15 Fullstack (App Router + Server Actions) · レッスン

状態をlocalStorageに永続化する

状態をlocalStorageに永続化してページの再読み込み後も維持し、Next.jsで安全にハイドレーションを処理し、Zustandのpersistミドルウェアを使います。

レッスン 4/413 ステップ

「状態をlocalStorageに永続化する」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Persist State?

By default, React state vanishes on reload. Persistence saves data like theme, cart contents, or draft text to the browser so it survives refreshes and revisits.

Meet localStorage

localStorage is a browser key-value store that keeps strings indefinitely. It is synchronous and scoped to the origin.

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

Storing Objects

localStorage only holds strings, so serialize objects with JSON.stringify when saving and JSON.parse when reading.

localStorage.setItem('cart', JSON.stringify({ items: 3 }));
const cart = JSON.parse(localStorage.getItem('cart') || '{}');

The SSR Problem

Next.js renders components on the server first, where window and localStorage do not exist. Accessing them during render throws an error.

You must read localStorage only after the component mounts in the browser.

Reading Safely in useEffect

Read persisted state inside useEffect, which runs only on the client. Start with a safe default for the server render.

'use client';
const [theme, setTheme] = useState('light');
useEffect(() => {
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
}, []);

Writing on Change

Sync state back to localStorage whenever it changes with another effect.

useEffect(() => {
  localStorage.setItem('theme', theme);
}, [theme]);

Avoiding Hydration Mismatch

If the server renders 'light' but the client immediately shows 'dark', React warns about a hydration mismatch. Render persisted UI only after a mounted flag is true.

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;

Persisting Zustand Stores

Zustand ships a persist middleware that automatically saves your whole store to localStorage. Wrap your store creator with it.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCart = create(persist(
  (set) => ({ items: [], add: (i) => set((s) => ({ items: [...s.items, i] })) }),
  { name: 'cart-storage' }
));

Choosing What to Persist

You rarely want to persist everything. Use partialize to save only the fields that matter and keep transient UI state in memory.

persist(storeFn, {
  name: 'cart-storage',
  partialize: (s) => ({ items: s.items })
});

Versioning & Migration

When your state shape changes, bump version and provide a migrate function so old stored data upgrades instead of breaking the app.

persist(storeFn, {
  name: 'cart-storage',
  version: 2,
  migrate: (old, from) => ({ ...old, currency: 'USD' })
});

Best Practices

Persist state responsibly:

Serialize objects with JSON
Read only on the client to avoid SSR errors
Guard against hydration mismatches
Use Zustand persist with partialize and versioning

Quick Check

Test your persistence knowledge.

対話的なレッスンで答える

Recap

You learned to persist client state:

Store strings in localStorage, serializing objects with JSON
Read in useEffect and guard with a mounted flag
Use Zustand's persist middleware with partialize and versioned migrations

Your app now remembers user state across reloads.

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 88

無料で学習を始めるコース全体を表示

よくある質問

「状態をlocalStorageに永続化する」レッスンは無料ですか？

はい。「状態をlocalStorageに永続化する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「状態をlocalStorageに永続化する」で何を学びますか？

状態をlocalStorageに永続化してページの再読み込み後も維持し、Next.jsで安全にハイドレーションを処理し、Zustandのpersistミドルウェアを使います。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「状態をlocalStorageに永続化する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack (App Router + Server Actions)に戻る