TOOLS BOX

React 19 の useOptimistic で楽観的 UI 更新を実装する

React 19 の useOptimistic を使い、Server Actions の完了を待たずに UI を即時更新し、失敗時に自動ロールバックする楽観的更新を実装する例。

Next.jsUI コンポーネントパフォーマンス

CSS Modules でスコープ付きスタイルのコンポーネントを作る

CSS Modules を使い、クラス名の衝突を避けたスコープ付きスタイルでコンポーネントを実装する例。Tailwind との使い分けと composes による再利用パターンも示す。

Next.jsスタイリングUI コンポーネント

React Testing Library でコンポーネントをテストする

render / screen / userEvent を使い、コンポーネントの表示・インタラクション・非同期更新を単体テストする例。jest-custom-hook-test のフック版に対するコンポーネント版。

Jest で document.cookie を使ったクッキー操作関数をテストする

document.cookie の get / set / delete を操作するユーティリティ関数を Jest でユニットテストする例。jsdom 環境での cookie 挙動とモックパターンを示す。

Jest + React Testing Library でカスタムフックをテストする

renderHook を使ってカスタムフックの動作を単体テストする例。act でステート更新をラップし、非同期フックの検証パターンも示す。

Jest の useFakeTimers でデバウンス・タイマー処理をテストする

jest.useFakeTimers() と jest.advanceTimersByTime() を使って、setTimeout / setInterval / デバウンス関数の時間依存処理を同期的にテストする例。

Jest で fetch をモックしてクライアントのデータ取得ロジックをテストする

jest.spyOn(global, 'fetch') または global.fetch のモック置換で、クライアント側のデータ取得関数の成功・エラー・ネットワーク障害ケースをテストする例。

Jest で localStorage / sessionStorage をモックしてフロントエンドロジックをテストする

jest の beforeEach でストレージをクリア・spyOn でモック化し、localStorage や sessionStorage を使うカスタムフックや関数を単体テストする例。

Jest でモジュールをモックして単体テストを書く

jest.mock でモジュール・外部依存を差し替え、spy 関数で呼び出しを検証する例。API クライアントや Next.js の navigation モジュールをモックするパターンを示す。

Jest で Next.js Route Handler をテストする

Request / Response オブジェクトを直接渡して Route Handler 関数をユニットテストする例。GET / POST それぞれのハッピーパスとエラーパスを検証する。

Next.jsJestテストAPI

Jest でスナップショットテストを書いてUI回帰を防ぐ

toMatchSnapshot / toMatchInlineSnapshot でコンポーネントの構造的回帰を検出する例。スナップショットの更新・管理方法とインラインスナップショットの使い分けも示す。

Jest で URLSearchParams を使った URL クエリ変換ロジックをテストする

URLSearchParams を操作するフィルタクエリ生成・パース関数を Jest でユニットテストする例。jsdom 環境での URLSearchParams の挙動とエッジケースの検証パターン。

Next.jsJestテスト検索 / フィルタ

Next.js Route Handler でエラーレスポンスを型安全に統一する

Route Handler のエラーレスポンスを型付きで統一し、400 / 404 / 500 を一貫して扱うラッパー関数を実装する例。try/catch パターンとエラー型の整理も示す。

Next.jsAPIエラーハンドリング

Next.js Route Handler でサーバーサイドキーワード検索を実装する

クエリパラメータで受け取ったキーワードを Route Handler でサーバーサイドフィルタし、ページネーション付きで返す例。クライアントのデバウンス入力と合わせた構成も示す。

Next.js検索 / フィルタAPI

Next.js Route Handler でクエリパラメータを使ってソートを実装する

sort キーと order（asc/desc）をクエリパラメータで受け取り、Route Handler でデータをソートして返すパターンと、クライアント側のソートボタン UI を示す例。

Next.jsAPI検索 / フィルタ

Next.js で認証状態に応じてページを redirect する

Server Component や Route Handler でセッションの有無を確認し、認証済みユーザーをダッシュボードへ、未認証ユーザーをログインページへ redirect するパターンの例。

Next.js認証ルーティング

Next.js で fetch キャッシュと revalidateTag を使ったキャッシュ制御

fetch の cache オプション（force-cache / no-store）と revalidateTag を組み合わせてデータ単位でキャッシュを制御する例。revalidatePath との使い分けも示す。

Next.jsAPIパフォーマンス

Next.js の cookies() で httpOnly セッション Cookie を管理する

next/headers の cookies() を使い、ログイン時に httpOnly セッション Cookie を発行し、Server Component・Route Handler・Middleware で読み書きする例。

Next.js認証API

Next.js Route Handler でファイルアップロードを受信・保存する

Route Handler で multipart/form-data を受信し、アップロードされたファイルをサーバー側に保存する例。ファイルサイズ・拡張子バリデーションパターンも示す。

Next.jsAPIファイルアップロード

Next.js で権限不足（forbidden）時の専用ページを表示する

認証済みで操作は許可されているが特定リソースへのアクセス権限がない場合に forbidden ページを表示し、unauthorized との使い分けを示す例。

Next.js認証ルーティング

Next.js の global-error.tsx でルートレベルのエラーをキャッチする

app/global-error.tsx を使い、ルートレイアウトを含む最上位のランタイムエラーをキャッチして reset ボタンで回復する実装例。error.tsx との責務の違いも示す。

Next.jsエラーハンドリング

Next.js Intercepting Routes で URL 付きモーダルを実装する

Intercepting Routes（(..) 記法）と Parallel Routes を組み合わせ、リスト画面の URL を維持したままモーダルで詳細を表示する実装例。

Next.jsルーティングUI コンポーネント

Next.js で not-found.tsx を使ってカスタム 404 ページを作る

notFound() 関数と not-found.tsx を組み合わせてカスタム 404 ページを実装する例。動的ルートでリソースが存在しない場合の処理パターンを示す。

Next.jsルーティングエラーハンドリング