Next.js / React / TypeScript の実践的なコードサンプル集
全 129 件（4 / 6 ページ）
Storybook 8 の CSF3 形式で UI コンポーネントの Story を作成する例。args / argTypes / play 関数を使ったインタラクティブテストのパターンを示す。
EmptyState コンポーネントの検索ゼロ・未登録・エラーの 3 バリアントを Storybook の story として定義し、args / argTypes でプロパティを切り替えながら確認できる例。
フィルタチップ（アクティブ状態・削除ボタン付き・複数選択）の各状態を Storybook CSF 形式でストーリー化し、args と play 関数でインタラクションを検証する例。
@storybook/test の userEvent と expect を使い、play 関数でユーザー操作をシミュレートしてコンポーネントの動作を Story 内で自動検証する例。
スケルトンカード UI（単体・グリッド・loading.tsx 相当）の各状態を Storybook CSF 形式でストーリー化し、animate-pulse の見た目を確認できるカタログを作る例。
Tailwind CSS の animate-* / transition / duration / ease クラスを使い、フェード・スライド・スケール・スピンなどのアニメーションをコンポーネントに適用する例。
Tailwind の class strategy と useState / localStorage を組み合わせてダークモードを実装する例。next-themes を使わずに自前でテーマ切り替えを管理する。
検索結果ゼロ・データ未登録・エラー後などの空状態に表示するコンポーネントを Tailwind CSS でスタイリングし、アイコン・メッセージ・アクションボタンを組み合わせたパターン集。
適用中のフィルタ条件をチップ形式で横並びに表示し、個別削除ボタンと一括クリアボタンを持つフィルターチップコンポーネントを Tailwind CSS で実装する例。
Tailwind CSS を使い Input / Select / Checkbox / Radio / Textarea などの基本フォーム部品に一貫したスタイルを適用するコンポーネント集。フォーカスリングやエラー状態のスタイルも示す。
フォーム送信や一覧更新中にコンテンツ上に半透明のローディングオーバーレイを被せる UI パターン。Tailwind CSS と React の状態管理で実装し、スケルトンカードとの責務の違いも示す。
Tailwind CSS のブレークポイントプレフィックス（sm / md / lg）を使い、モバイルファーストのレスポンシブレイアウトを実装する例。
コンテンツ読み込み中に表示するスケルトン（骨格）カード UI を Tailwind CSS の animate-pulse で実装し、一覧グリッドに並べるパターン。
Tailwind CSS でレスポンシブ対応のテーブル UI を実装し、ヘッダー固定・行ホバー・ストライプ・空状態・ローディング状態のスタイルパターンをまとめた例。
useQuery の page パラメータと keepPreviousData を使い、クライアントサイドでスムーズなページネーションを実装する例。
Server Component で prefetchQuery を実行し HydrationBoundary でクライアントに渡すことで、ウォーターフォールなしに TanStack Query のキャッシュをハイドレートする例。
z.discriminatedUnion を使い、status フィールドで分岐するバリアント型（成功 / エラー / ローディング等）を型安全にパース・絞り込む例。
Zod でネストされたオブジェクト・配列のバリデーションと、transform / refine / superRefine を使ったカスタム変換・クロスフィールド検証の例。
App Router の cookies() を使い、Server Component・Server Actions・Route Handler でクッキーを読み書きする実装例。
next/dynamic を使い、重いコンポーネントや SSR 不要なコンポーネントを遅延読み込みしてバンドルサイズを削減する実装例。
Zod スキーマで環境変数を定義・検証し、未設定の変数をビルド時または起動時に検出する実装例。
next/image を使い、自動リサイズ・WebP 変換・遅延読み込みを設定する実装例。外部ドメイン画像の許可設定も含む。
loading.tsx を配置するだけでルートセグメント単位のローディング UI が自動適用される仕組みと、Suspense を使った部分的な待機表示の実装例。
metadata オブジェクトと generateMetadata を使い、静的・動的な SEO メタデータと OGP を設定する実装例。
絞り込み・並び順