Next.js / React / TypeScript の実践的なコードサンプル集
全 154 件（7 / 7 ページ）
App Router の Route Handler（route.ts）を使って GET / POST エンドポイントを実装する基本パターン。NextResponse と型安全なリクエスト処理を解説する。
next/image の Image コンポーネントを使った画像最適化の基本。サイズ指定・lazy loading・外部ドメイン許可の設定を解説する。
Radix UI の Dialog コンポーネントを使ってアクセシビリティに配慮したモーダルダイアログを実装する。Tailwind CSS でスタイリングする例も示す。
useState + createContext + useContext を組み合わせてグローバルな状態を管理する最小パターン。Zustand などの外部ライブラリが不要なケースに適している。
useCallback は関数の参照を、useMemo は計算結果をメモ化する。どちらをいつ使うべきかを最小サンプルで比較する。
Next.js App Router 環境で react-hook-form と zod を使ったログインフォームの実装例。クライアントバリデーションとエラー表示を型安全に扱う。
Next.js App Router の Server Actions を使ってフォーム送信を実装する例。useActionState と Zod によるサーバー側バリデーションを示す。
Zustand を使ってモーダルの開閉状態をグローバルに管理する実装例。複数モーダルへの対応と型安全な設計を示す。
Playwright を使ってログインフォームの E2E テストを実装する例。Page Object Model パターンと認証状態の再利用を示す。
Tailwind CSS の clsx / cva を使ってバリアント（color / size）を型安全に管理するバッジコンポーネントの実装例。
絞り込み・並び順