Next.js / React / TypeScript の実践的なコードサンプル集
全 129 件（5 / 6 ページ）
@スロット記法を使い、同一ページに複数の独立したルートコンテンツを並列表示する実装例。
Route Groups（括弧付きディレクトリ）を使い、URL 構造を変えずに異なる layout を適用する実装例。
searchParams を読み取り、URL クエリパラメータに基づいてサーバー側でリストをフィルタリングする実装例。
Server Actions と useActionState を使い、クライアントコンポーネントからサーバー関数を直接呼び出してフォーム送信を処理する実装例。
クラスコンポーネントで ErrorBoundary を実装し、子コンポーネントのレンダリングエラーをフォールバック UI で安全に表示する実装例。
useFieldArray を使い、フォーム内のフィールドを動的に追加・削除・並び替えする実装例。Zod で配列バリデーションも行う。
React Hook Form の register でファイル入力を管理し、Zod でファイルサイズ・拡張子バリデーションを行う実装例。
createPortal を使い、モーダルやトーストを親コンポーネントの DOM 外（body 直下）に描画する実装例。
createAsyncThunk で API フェッチを定義し、pending / fulfilled / rejected の状態を extraReducers で管理する実装例。
useInfiniteQuery を使い、スクロールに応じて次ページを自動フェッチする無限スクロールの実装例。Intersection Observer と組み合わせる。
useMutation の onMutate で UI を即時更新し、失敗時に onError でロールバックする楽観的更新の実装例。
fetch した外部 API レスポンスを Zod スキーマで検証し、型安全なデータとエラーを分離して扱う実装例。
同一の Zod スキーマを React Hook Form のバリデーションと fetch レスポンス検証の両方で再利用し、型定義の重複をなくす実装例。
persist middleware を使い、Zustand の状態をローカルストレージに永続化してページリロード後も状態を維持する実装例。
useStore にセレクタ関数を渡し、参照する state を絞ることで不要な再レンダリングを防ぐ実装例。
MUI の TextField / Button を react-hook-form の Controller でラップし、Zod でバリデーションする実装例。MUI の非標準 input と react-hook-form を正しく接続する方法を扱う。
App Router の error.tsx を使い、セグメント単位で非同期エラーをキャッチしてフォールバック UI を表示する実装例。
middleware.ts でリクエスト時に Cookie をチェックし、未認証ユーザーをログインページへリダイレクトするルート保護の実装例。
createSlice でリデューサーとアクションを一括定義し、useSelector / useDispatch でコンポーネントから状態を読み書きする実装例。
Next.js App Router + Supabase Auth を使ったメール/パスワード認証の実装例。サインアップ・ログイン・ログアウト・セッション管理（Server Components からの参照）を扱う。
TanStack Query を使ったデータフェッチ・ローディング・エラー状態管理の実装例。useQuery でシンプルに非同期状態を扱う。
useMutation を使い、フォーム送信・削除などの副作用操作を型安全に管理する実装例。成功・エラー・ローディング状態を宣言的に扱う。
Zustand の immer middleware を使い、ネストした状態をミュータブルな書き方で安全に更新する実装例。
App Router の Route Handler（route.ts）を使って GET / POST エンドポイントを実装する基本パターン。NextResponse と型安全なリクエスト処理を解説する。
絞り込み・並び順