119 件（1 / 5 ページ）
CSS Modules でスコープ付きスタイルのコンポーネントを作る
CSS Modules を使い、クラス名の衝突を避けたスコープ付きスタイルでコンポーネントを実装する例。Tailwind との使い分けと composes による再利用パターンも示す。
React Testing Library でコンポーネントをテストする
render / screen / userEvent を使い、コンポーネントの表示・インタラクション・非同期更新を単体テストする例。jest-custom-hook-test のフック版に対するコンポーネント版。
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 それぞれのハッピーパスとエラーパスを検証する。
Jest でスナップショットテストを書いてUI回帰を防ぐ
toMatchSnapshot / toMatchInlineSnapshot でコンポーネントの構造的回帰を検出する例。スナップショットの更新・管理方法とインラインスナップショットの使い分けも示す。
Jest で URLSearchParams を使った URL クエリ変換ロジックをテストする
URLSearchParams を操作するフィルタクエリ生成・パース関数を Jest でユニットテストする例。jsdom 環境での URLSearchParams の挙動とエッジケースの検証パターン。
Next.js Route Handler でエラーレスポンスを型安全に統一する
Route Handler のエラーレスポンスを型付きで統一し、400 / 404 / 500 を一貫して扱うラッパー関数を実装する例。try/catch パターンとエラー型の整理も示す。
Next.js Route Handler でサーバーサイドキーワード検索を実装する
クエリパラメータで受け取ったキーワードを Route Handler でサーバーサイドフィルタし、ページネーション付きで返す例。クライアントのデバウンス入力と合わせた構成も示す。
Next.js Route Handler でクエリパラメータを使ってソートを実装する
sort キーと order（asc/desc）をクエリパラメータで受け取り、Route Handler でデータをソートして返すパターンと、クライアント側のソートボタン UI を示す例。
Next.js で認証状態に応じてページを redirect する
Server Component や Route Handler でセッションの有無を確認し、認証済みユーザーをダッシュボードへ、未認証ユーザーをログインページへ redirect するパターンの例。
Next.js で fetch キャッシュと revalidateTag を使ったキャッシュ制御
fetch の cache オプション（force-cache / no-store）と revalidateTag を組み合わせてデータ単位でキャッシュを制御する例。revalidatePath との使い分けも示す。
Next.js の cookies() で httpOnly セッション Cookie を管理する
next/headers の cookies() を使い、ログイン時に httpOnly セッション Cookie を発行し、Server Component・Route Handler・Middleware で読み書きする例。
Next.js Route Handler でファイルアップロードを受信・保存する
Route Handler で multipart/form-data を受信し、アップロードされたファイルをサーバー側に保存する例。ファイルサイズ・拡張子バリデーションパターンも示す。
Next.js で権限不足（forbidden）時の専用ページを表示する
認証済みで操作は許可されているが特定リソースへのアクセス権限がない場合に forbidden ページを表示し、unauthorized との使い分けを示す例。
Next.js の global-error.tsx でルートレベルのエラーをキャッチする
app/global-error.tsx を使い、ルートレイアウトを含む最上位のランタイムエラーをキャッチして reset ボタンで回復する実装例。error.tsx との責務の違いも示す。
Next.js Intercepting Routes で URL 付きモーダルを実装する
Intercepting Routes（(..) 記法）と Parallel Routes を組み合わせ、リスト画面の URL を維持したままモーダルで詳細を表示する実装例。
Next.js で not-found.tsx を使ってカスタム 404 ページを作る
notFound() 関数と not-found.tsx を組み合わせてカスタム 404 ページを実装する例。動的ルートでリソースが存在しない場合の処理パターンを示す。
React 19 の useOptimistic で楽観的 UI 更新を実装する
React 19 の useOptimistic を使い、Server Actions の完了を待たずに UI を即時更新し、失敗時に自動ロールバックする楽観的更新を実装する例。
Next.js App Router で URL 同期ページネーションを実装する
searchParams を受け取る Server Component と Link コンポーネントを使い、URL クエリ（?page=N）と同期したページネーションを実装する例。
Next.js App Router の layout で認証チェックして配下ページを保護する
App Router の layout.tsx でセッション Cookie を確認し、未認証ユーザーをログインページへ redirect することで配下のすべてのページを一括保護する例。