#React

React Hook Form と Zod を zodResolver でつなぐ実装を、ログイン・新規登録フォームを題材に一気通貫でまとめます。z.infer での型導出、.refine でのパスワード一致、formState.errors の分割代入まで。さらに register の spread が非制御コンポーネントで効く理由と、Controller でラップしないと対応できないケースの境界を整理します。

pnpm製プロジェクトで、ターミナルのESLintは動くのにエディタ上では警告が一切出ない。原因はプラグインのhoist、決め手は拡張のログだった。.npmrcでの解決とモノレポでの設定まで。

TanStack Query を Next.js App Router の静的エクスポート構成に入れる手順を、Providerの初期化(use client)→layoutラップ→共通fetch(lib/api.ts)→hooks(1ファイル1フック)→コンポーネントでの使い方、まで一気通貫でまとめます。

create-next-app から Amplify Gen2 のバックエンド（Cognito/DynamoDB/Lambda）を追加し、Server Actions での SSR 書き込み、Lambda を API Gateway で REST 公開、Next.js API Route、Amplify Hosting の Git 連携デプロイまでを一気通貫でまとめます。

app/ はルーティング専用に薄く保ち、ドメインロジックは features/ に寄せる。Server Actions の命名規約と、認証を lib/auth に集約し認可をデータ操作とセットで書く3層の考え方を整理します。