サンプル一覧

全 129 件（2 / 6 ページ）

中級

Next.js App Router の layout で認証チェックして配下ページを保護する

App Router の layout.tsx でセッション Cookie を確認し、未認証ユーザーをログインページへ redirect することで配下のすべてのページを一括保護する例。

Next.js認証ルーティング

初級

Next.js で検索条件を保持したパンくずリストを生成する

カテゴリ・フィルタ・キーワードなどの現在の検索コンテキストをパンくず形式で表示し、各ステップをクリックして段階的に条件を外せる戻り導線パターン。

Next.jsルーティング検索 / フィルタ

初級

Next.js で現在の検索条件を保持したままページ遷移するリンクを生成する

一覧ページの検索語・フィルタ・sort・page を URL クエリとして保持し、詳細ページや別導線へ遷移後に戻ったとき条件が復元されるリンク生成パターン。

Next.jsルーティング検索 / フィルタ

初級

Next.js でロールベースの表示制御とアクセスガードを実装する

ユーザーのロール（admin / editor / viewer など）に応じて UI 要素の表示・非表示を制御し、Server Component で早期ガードするパターン。forbidden との責務の違いも示す。

Next.js認証ルーティング

中級

Next.js Route Handler で REST API（CRUD）を実装する

app/api/ 配下の Route Handler を使い、GET / POST / PUT / DELETE を備えた REST API を実装する例。インメモリデータを使ってシンプルに CRUD を示す。

Next.jsAPICRUD

中級

Next.js Server Actions で CRUD を実装する

Server Actions と revalidatePath を使い、追加・更新・削除を含む CRUD 操作を実装する例。API ルートを作らずにフォームからサーバー処理を呼び出す。

Next.jsServer ActionsCRUD

初級

Next.js で session cookie を削除してログアウトを実装する

Route Handler で httpOnly session cookie を削除してログアウト処理を実装し、Server Component でのセッション確認と合わせた認証フロー全体を示す例。

Next.js認証

初級

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

認証済みだが権限が不足しているユーザーに unauthorized ページを表示し、適切なメッセージと導線を提供するパターン。Next.js の unauthorized() 関数と not-found の使い分けを示す例。

Next.js認証ルーティング

中級

Next.js でファイルアップロードの進捗バーを表示する

XMLHttpRequest の progress イベントを使ってアップロード中の進捗率を取得し、プログレスバー UI でリアルタイム表示する実装例。

Next.jsファイルアップロードUI コンポーネント

初級

Next.js で URL クエリパラメータのフィルタを一括リセットする

複数の URL クエリパラメータ（q・category・status など）をまとめて削除してフィルタ状態を初期化するパターン。リセットボタンと個別削除の両方を実装する例。

Next.js検索 / フィルタルーティング

中級

Playwright でログインから保護ページ到達までの認証フローを E2E テストする

Playwright でログインフォームへの入力・送信・Cookie 設定・保護ページへのリダイレクト確認・ログアウトまでの認証フローを E2E テストする例。

Next.jsPlaywrightテスト認証

中級

Playwright でファイルアップロードの E2E テストを書く

Playwright の setInputFiles を使って file input へのファイル選択をシミュレートし、アップロードの成功・エラー・複数ファイルケースを E2E テストする例。

Next.jsPlaywrightテストファイルアップロード

中級

Playwright でページネーション付き一覧のページ遷移をE2Eテストする

一覧ページのページネーション操作（次へ・前へ・ページ番号クリック）を Playwright でE2Eテストし、URL クエリと表示件数の整合性を検証する例。

Next.jsPlaywrightテスト

中級

Playwright で検索フォーム入力から結果表示・0 件状態までを E2E テストする

Playwright で検索フォームへの入力・URL パラメータ更新・一覧フィルタ結果確認・0 件 EmptyState 表示・フィルタリセットまでの検索フロー全体を E2E テストする例。

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

中級

Playwright でソート変更時の URL 同期と表示順をE2Eテストする

一覧ページのソート選択（更新順・作成順・タイトル順）を Playwright でE2Eテストし、URL の sort クエリパラメータと表示順の整合性を検証する例。

Next.jsPlaywrightテスト

中級

Prisma と Route Handler で CRUD API を実装する

Prisma Client の findMany / create / update / delete を Route Handler から呼び出して CRUD API を構築する例。スキーマ定義からマイグレーション・型安全なクエリまでを示す。

Next.jsPrismaCRUDAPI

中級

Prisma でフィルタ条件を動的に組み立ててクエリを実行する

URL クエリパラメータから受け取った検索条件を Prisma の where 句に動的に組み立て、キーワード・カテゴリ・難易度などの複合フィルタクエリを実行するパターン。

Next.jsPrismaAPI検索 / フィルタ

中級

Prisma で複数カラムをまたぐキーワード検索クエリを実装する

タイトル・本文・タグなど複数カラムをまたぐキーワード検索を Prisma の OR 条件と fulltext 検索で実装するパターン。単語分割・スコアリングなしの実用的な部分一致パターンを示す。

Next.jsPrismaAPI検索 / フィルタ

中級

Prisma で skip / take を使ったページネーションクエリを実装する

Prisma の skip / take / orderBy を使ったオフセットページネーションと、cursor ベースのページネーションのパターン、Route Handler との組み合わせ例。

Next.jsPrismaCRUDページネーション

中級

Prisma でリレーションを含むクエリを書く（include / select / ネスト）

Prisma の include / select を使った 1対多・多対多のリレーション取得パターンと、ネストしたフィルタ・ソート・集計（_count）の例。

Next.jsPrismaCRUD

中級

Prisma で論理削除（soft delete）を実装する

deletedAt フィールドを使った論理削除パターンを Prisma で実装し、通常クエリから削除済みレコードを自動除外する例。

Next.jsPrismaCRUD

初級

Prisma の orderBy で並び替えクエリを実装する

Prisma の orderBy による単一フィールド・複数フィールド・リレーション先フィールドでの並び替えパターンと、null 値の扱い（nulls first / last）の例。

Next.jsPrismaCRUDAPI

初級

React で検索入力欄にクリアボタンを追加する

検索フィールドに入力内容を一発でクリアする × ボタンを追加し、入力中だけ表示する制御と URL クエリへの反映パターンを示す例。

Next.js検索 / フィルタUI コンポーネント

中級

React でコマンドパレット風のキーワードフィルタ UI を実装する

キーボードショートカットで開くモーダル内で候補リストをリアルタイムフィルタし、キーボードナビゲーションで選択するコマンドパレット UI の実装例。

Next.js検索 / フィルタUI コンポーネント