TOOLS BOX

Next.js

React ベースのフルスタックフレームワーク。SSR・SSG・App Router・API Routes を提供する。

React

UI 構築のための JavaScript ライブラリ。コンポーネントベースで宣言的に UI を記述できる。

Zod

TypeScript ファーストのスキーマバリデーションライブラリ。型推論と実行時バリデーションを同一スキーマで行える。

認証・権限チェックの失敗分岐

未認証・権限不足・フォーム認証失敗・想定外エラーの 4 種を区別し、redirect() / notFound() / return { formError } / throw の使い分けを認証文脈で整理するガイド。

Cookie 有効期限・更新処理パターン

Session 維持に関わる Cookie の寿命設計と更新タイミングを整理するガイド。maxAge / expires の使い分け、固定期限とスライディング期限の違い、JWT と DB Session それぞれでの更新処理の考え方を比較する。

Cookie セキュリティオプション 3点セット

httpOnly / sameSite / secure の役割差と組み合わせ理由を整理するガイド。それぞれが防ぐ攻撃と開発環境での注意点を比較する。

デバウンス

連続するイベント発火を抑制し、最後の発火から一定時間後にだけ処理を実行するテクニック。

エラーハンドリングの考え方

Next.js / React アプリでの失敗の扱い方。期待される失敗（バリデーション・認証失敗）は UI に返し、予期しない失敗（DB障害・システムエラー）は throw して error.tsx でキャッチする。2 種類の失敗を区別することが判断の出発点。

useFormContext と Context を使ったフォーム状態の配布パターン

分割フォームコンポーネントにおける状態配布の責務分離を整理するガイド。react-hook-form の FormProvider / useFormContext はフォーム内部状態（入力値・errors・register）の配布に使い、ステップ番号・表示モード・外側の UI 状態は通常の React Context や useReducer が担う。useFormContext を使いすぎてフォーム外の文脈を混入させないための判断基準を説明する。

グローバル store と private state の使い分け

Zustand などのグローバル store に置くデータと、コンポーネントの private state に閉じるべきデータの判断基準を整理するガイド。form state・hover・server data・derived state を store に入れるべきでない理由と、global に置くべき状態の特徴を具体例で説明する。

ハイドレーション

サーバーで生成した HTML に React がイベントリスナーを付加し、インタラクティブな状態へ移行するプロセス。

JWT vs DB Session 比較

Session ストレージ方式として JWT（署名済みトークン）と DB Session（サーバー側ストア）を比較するガイド。無効化のしやすさ・権限変更の追従・スケーラビリティの違いを整理し、どちらを選ぶかの設計判断材料を提供する。

Link vs router.push()

Next.js の宣言的ナビゲーション（Link コンポーネント）と命令的ナビゲーション（router.push()）の使い分けガイド。JSX 上のリンクには Link、イベントハンドラや条件分岐後の遷移には router.push() を使う。

localStorage / persist パターン

ブラウザのローカルストレージを使った状態永続化のパターンを整理するガイド。localStorage に向くデータ / 向かないデータの判断基準、Zustand persist middleware の位置づけ、SSR 環境での hydration ずれの原因と対処、保存しすぎない考え方を説明する。

Next.js 認証方式比較

Middleware / Layout 保護 / Server Component 個別確認の3方式を比較し、Next.js App Router で認証判定をどこに置くべきかの選び分けを整理するガイド。

Next.js キャッシュ設計

fetch cache / revalidatePath / revalidateTag / no-store の違いを比較し、場面に応じたキャッシュ設計の選び分けを整理するガイド。

offset vs cursor ページネーション

Prisma の offset 方式（skip/take）と cursor 方式の違いを比較し、実装状況や UI 要件に応じた選び分けを整理するガイド。

ページネーション

大量のデータを分割し、ページ単位で表示・取得する設計パターン。

router.push() vs router.replace() vs redirect()

Client Component でのナビゲーション手段（router.push() / router.replace()）と Server 側リダイレクト（redirect()）の選び分けガイド。履歴の残り方・実行コンテキスト・典型ユースケースで判断する。

React Hook によるデータ受け渡しパターン

コンポーネント間のデータ受け渡しを props / state lifting / custom hook / context の 4 段階で整理するガイド。props drilling の許容範囲、custom hook が状態を共有しない理由、context を載せすぎない判断基準、Zustand 導入前に React 標準で整理できる範囲を明確にする。

React の再レンダリング最小化パターン

React の再レンダリングを必要な範囲に絞るためのパターン。memo / useMemo / useCallback の役割の違いと使いどころ、context と組み合わせるときの注意点、過剰最適化を避けるための考え方を整理する。

redirect

ユーザーを別の URL へ転送する処理。使う場所によって redirect()（next/navigation）と NextResponse.redirect()（next/server）を使い分ける。

react-hook-form の field array パターン

react-hook-form の useFieldArray を使った動的フォームの設計判断をまとめるガイド。固定フィールドとの境界、append / remove / swap / move の使い方、field.id を key に使う理由、defaultValues の初期化、配列要素ごとのバリデーション、submit データの整形、よくある誤用を実務目線で整理する。

useRouter().push() vs redirect()

Client Component でのナビゲーション（useRouter().push()）と Server Component / Server Action でのリダイレクト（redirect()）の違いと使い分けを整理するガイド。

select vs include

Prisma の select と include の違いと使い分けを整理するガイド。取得フィールドの絞り込みとリレーション展開の役割差を比較する。

Server Actions + Zod バリデーションパターン

Server Actions で Zod バリデーションを行い、useActionState でフォームエラーを返す実務パターン。safeParse で期待される失敗を状態として返し、予期しないエラーは throw して分離する。

Server Actions

Next.js App Router で `"use server"` を宣言したサーバー側の関数をクライアントから直接呼び出す仕組み。フォーム送信・データ変更を API Routes なしで実装でき、revalidatePath / revalidateTag / redirect と組み合わせて更新フローを完結させる。

型安全な Session 管理パターン

getSession() と requireSession() を分けて設計することで、型安全かつ責務を分離した Session 管理を実現するパターン。null を返す汎用関数と、未認証時に redirect する専用ラッパーの役割を整理する。

useOptimistic + Server Actions 統合パターン

useOptimistic と Server Actions を組み合わせた楽観的更新フロー。Server Action の完了を待たずに UI を先に更新し、成功時は確定、失敗時は React が自動ロールバックする。useActionState パターンとの使い分けを含む実務判断を整理する。

useReducer と react-hook-form の使い分け

フォーム実装における useReducer と react-hook-form の役割分担を整理するガイド。入力値・バリデーション・dirty state は react-hook-form が担い、ステップ遷移・画面モード・送信フロー状態・複数イベント分岐は useReducer が向く。両者を混同せず、入力値と UI フロー状態を明確に分ける実務判断基準を説明する。

useReducer と useState の使い分け

ローカル状態の持ち方として useState と useReducer をどう選ぶかを整理するガイド。単純な値・独立した状態は useState が自然で、複数フィールドの連動・イベント種別ごとの分岐・状態遷移の明示化には useReducer が向く。useReducer を過剰に使わないための判断基準も整理する。

Zustand persist のバージョニング

persist middleware で永続化した store のスキーマを安全に変更するためのパターン。version / migrate / partialize の役割と使い分け、古い保存データの扱い方、壊れない永続化設計の考え方を整理する。

Zustand / store 設計パターン

Zustand を使うときの store 設計判断を整理するガイド。local state / global state / server data の責務を切り分け、store に置くものと置かないものの基準、action 設計、selector による再レンダリング制御、immutable update の原則を実務目線で整理する。

Zustand と react-hook-form の境界

フォーム内部状態（入力値・バリデーション・dirty 状態）は react-hook-form に、フォーム外の共有状態（送信結果・ページ跨ぎの選択条件）は Zustand に任せるという責務分離を整理するガイド。wizard フォームや submit 後の store 反映など境界が曖昧になりやすい場面の判断基準を説明する。

cursor

Prisma クエリでページネーションの開始位置を指定するオプション。大量データでも一定のパフォーマンスを保てる cursor ベースページネーションの中核。

fetch cache

Next.js が拡張した fetch のキャッシュ制御オプション。force-cache / revalidate / tags の組み合わせで、静的生成・ISR・タグ付き再検証を切り替える。

httpOnly

JavaScript からの Cookie アクセスを禁止するオプション。XSS によるトークン窃取を防ぐ基本設定。

include

Prisma クエリでリレーション先モデルを一緒に取得するオプション。JOIN 相当の操作をシンプルに書ける。

cache: 'no-store'

fetch のキャッシュを無効化するオプション。毎リクエストで最新データを取得する。リアルタイム性が必要な場面やユーザー固有データに使う。

orderBy

Prisma クエリの並び順を指定するオプション。単一フィールド・複数フィールド・リレーション先フィールドを指定できる。

revalidatePath

Next.js のキャッシュを特定パスに対して即時無効化する関数。Server Action や Route Handler からデータ更新後に呼ぶ。

revalidateTag

fetch に付けたタグを指定して、タグ単位でキャッシュを即時無効化する関数。複数ページにまたがるデータ更新に有効。

router.refresh()

現在の URL のまま Server Component を再フェッチし、サーバー側の最新状態を UI に反映させるメソッド。ページ遷移は行わない。

sameSite

Cookie の送信範囲をクロスサイトリクエスト時に制御するオプション。CSRF 対策の基本設定。

secure

HTTPS 接続時のみ Cookie を送信するオプション。本番環境では必須のセキュリティ設定。

select

Prisma クエリで取得するフィールドを明示的に指定するオプション。不要なフィールドを除外してover-fetching を防ぐ。

skip

Prisma クエリで先頭から N 件をスキップするオプション。take と組み合わせてページネーションを実現する。

take

Prisma クエリで最大取得件数を指定するオプション（SQL の LIMIT 相当）。skip と組み合わせてページネーションを実現する。

useActionState

Server Action の戻り値をフォームの状態として管理する React Hook。バリデーションエラーや処理結果をクライアントで受け取れる。React 18 の useFormState を React 19 で改名したもの。

useFormStatus

親フォームの送信状態（pending）をコンポーネントから参照する React DOM Hook。送信中のボタン無効化やローディング表示に使う。

useOptimistic

サーバーのレスポンスを待たずに UI を先に更新する楽観的更新を実装する React Hook。Server Action の完了後に実際のデータで上書きされる。

where

Prisma クエリで絞り込み条件を指定するオプション。完全一致・部分一致・複数条件（AND / OR）など様々なフィルタを組み立てられる。