Next.js LocalStorage Persistence

Next.js 14 App Router에서 SSR-안전한 localStorage 지속성 구현 스킬입니다.

Quick Reference

SSR-Safe 패턴

// ❌ 잘못된 방법 - 하이드레이션 에러 발생
const data = localStorage.getItem('key');

// ✅ 올바른 방법 - useEffect 내에서 사용
useEffect(() => {
  const data = localStorage.getItem('key');
}, []);

하이드레이션 에러 방지

const [hydrated, setHydrated] = useState(false);

useEffect(() => {
  setHydrated(true);
}, []);

if (!hydrated) return <Loading />;

Contents

• reference.md - SSR/CSR 라이프사이클 및 하이드레이션 가이드
• guide.md - 타입-안전 스토리지 유틸리티 및 Zustand 통합
• scripts/validate_storage_schema.py - 스토리지 스키마 검증

When to Use

• Next.js에서 localStorage 사용 시 하이드레이션 에러 발생
• 세션 간 상태 지속성 구현 시
• 타입-안전한 스토리지 추상화 필요 시
• Zustand persist 미들웨어 설정 시