119 件（2 / 5 ページ）
Next.js で現在の検索条件を保持したままページ遷移するリンクを生成する
一覧ページの検索語・フィルタ・sort・page を URL クエリとして保持し、詳細ページや別導線へ遷移後に戻ったとき条件が復元されるリンク生成パターン。
Next.js Route Handler で REST API（CRUD）を実装する
app/api/ 配下の Route Handler を使い、GET / POST / PUT / DELETE を備えた REST API を実装する例。インメモリデータを使ってシンプルに CRUD を示す。
Next.js Server Actions で CRUD を実装する
Server Actions と revalidatePath を使い、追加・更新・削除を含む CRUD 操作を実装する例。API ルートを作らずにフォームからサーバー処理を呼び出す。
Next.js で session cookie を削除してログアウトを実装する
Route Handler で httpOnly session cookie を削除してログアウト処理を実装し、Server Component でのセッション確認と合わせた認証フロー全体を示す例。
Next.js で権限不足（unauthorized）時の専用ページを表示する
認証済みだが権限が不足しているユーザーに unauthorized ページを表示し、適切なメッセージと導線を提供するパターン。Next.js の unauthorized() 関数と not-found の使い分けを示す例。
Next.js でファイルアップロードの進捗バーを表示する
XMLHttpRequest の progress イベントを使ってアップロード中の進捗率を取得し、プログレスバー UI でリアルタイム表示する実装例。
Next.js で URL クエリパラメータのフィルタを一括リセットする
複数の URL クエリパラメータ（q・category・status など）をまとめて削除してフィルタ状態を初期化するパターン。リセットボタンと個別削除の両方を実装する例。
Playwright でログインから保護ページ到達までの認証フローを E2E テストする
Playwright でログインフォームへの入力・送信・Cookie 設定・保護ページへのリダイレクト確認・ログアウトまでの認証フローを E2E テストする例。
Playwright でファイルアップロードの E2E テストを書く
Playwright の setInputFiles を使って file input へのファイル選択をシミュレートし、アップロードの成功・エラー・複数ファイルケースを E2E テストする例。
Playwright でページネーション付き一覧のページ遷移をE2Eテストする
一覧ページのページネーション操作（次へ・前へ・ページ番号クリック）を Playwright でE2Eテストし、URL クエリと表示件数の整合性を検証する例。
Playwright で検索フォーム入力から結果表示・0 件状態までを E2E テストする
Playwright で検索フォームへの入力・URL パラメータ更新・一覧フィルタ結果確認・0 件 EmptyState 表示・フィルタリセットまでの検索フロー全体を E2E テストする例。
Prisma と Route Handler で CRUD API を実装する
Prisma Client の findMany / create / update / delete を Route Handler から呼び出して CRUD API を構築する例。スキーマ定義からマイグレーション・型安全なクエリまでを示す。
Prisma でフィルタ条件を動的に組み立ててクエリを実行する
URL クエリパラメータから受け取った検索条件を Prisma の where 句に動的に組み立て、キーワード・カテゴリ・難易度などの複合フィルタクエリを実行するパターン。
Prisma で skip / take を使ったページネーションクエリを実装する
Prisma の skip / take / orderBy を使ったオフセットページネーションと、cursor ベースのページネーションのパターン、Route Handler との組み合わせ例。
Prisma でリレーションを含むクエリを書く（include / select / ネスト）
Prisma の include / select を使った 1対多・多対多のリレーション取得パターンと、ネストしたフィルタ・ソート・集計（_count）の例。
Prisma で論理削除（soft delete）を実装する
deletedAt フィールドを使った論理削除パターンを Prisma で実装し、通常クエリから削除済みレコードを自動除外する例。
Prisma の orderBy で並び替えクエリを実装する
Prisma の orderBy による単一フィールド・複数フィールド・リレーション先フィールドでの並び替えパターンと、null 値の扱い（nulls first / last）の例。
React で検索入力欄にクリアボタンを追加する
検索フィールドに入力内容を一発でクリアする × ボタンを追加し、入力中だけ表示する制御と URL クエリへの反映パターンを示す例。
React でコマンドパレット風のキーワードフィルタ UI を実装する
キーボードショートカットで開くモーダル内で候補リストをリアルタイムフィルタし、キーボードナビゲーションで選択するコマンドパレット UI の実装例。
React で Compound Component パターンを実装する
Context と Children を組み合わせた Compound Component パターンで、Tabs や Accordion のような柔軟な UI コンポーネントを実装する例。
Context と CSS カスタムプロパティでテーマシステムを構築する
React Context で現在のテーマを管理し、CSS カスタムプロパティ（CSS 変数）でコンポーネントがテーマを自動追従するシステムを実装する例。
制御コンポーネントと非制御コンポーネントの違いと使い分け
useState で値を管理する制御コンポーネントと、useRef で DOM を直接参照する非制御コンポーネントの違いを実装例で比較し、それぞれの適切なユースケースを示す。
useDebounce カスタムフックで検索入力をデバウンスする
useDebounce カスタムフックを自作し、検索入力のデバウンス処理を実装する例。lodash.debounce を使わず useEffect + setTimeout で実現する。
HTML5 Drag & Drop API でリストの順序を並べ替える
外部ライブラリを使わず HTML5 の Drag & Drop API（dragstart / dragover / drop イベント）でリストアイテムの順序をドラッグで並べ替える実装例。