#Next.js

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

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

保存(Ctrl+S)のたびに未使用importを消し、importの並び順も自動で揃える設定を、ESLint flat config で作ります。eslint-plugin-unused-imports と simple-import-sort、VS Code の codeActionsOnSave、Prettier との併用・順序までまとめます。

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

git ルートに husky を置き、frontend の ESLint（no-console・any 禁止・未使用/import 整列）と Prettier（Tailwind クラス整列）を lint-staged 経由で pre-commit 自動実行する構成を、実際の設定ファイルとハマりどころつきで解説します。

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

rehype-pretty-code + Shiki でランタイム JS ゼロのコードハイライト。ライト/ダーク両対応の方法も。