# Next.js

分類：フロントエンド
公式：https://nextjs.org/

## 既定として使う役割
- アプリ（SSR・フルスタック）（§3）：Next.js（App Router）
  - 代替 TanStack Start：Vercel依存を避けたい、クライアント主体で型安全なルーティングを重視するとき
  - 代替 React Router（フレームワークモード）：Remix系の資産があるとき

## 代替として使う条件
- 画面（§2-7、既定はPhoenix LiveView（サーバー主導でリアルタイムUI））：フロントをReactで作りたいとき
- 静的サイト・コンテンツ中心（§3、既定はAstro）：同じリポジトリでアプリ部分も持つとき
- 同一リポジトリ内のフロント⇔バック（TS同士）（§5、既定はHono RPC）：Next.jsの中で完結し、別プロセスのAPIを持たないとき

## 成長したときの移行（§24）→ ECS／Cloud Run（コンテナ）
- きっかけ：費用の増加、AWSに集約したい
- 最初からの備え：Next.jsのstandalone出力でコンテナ化できる状態を保つ。Vercel固有の機能への依存を最小にする

## ケース別の構成（§19）
- EC（独自要件が多い）：フロント＝Next.js＋shadcn/ui
- 自社SaaS（B2B）：フロント＝Next.js＋shadcn/ui＋TanStack Query
- toCサービス（Web＋モバイル）：Web＝Next.js
- AI／LLMプロダクト：フロント＝Next.js（ストリーミング表示）
- 個人開発・MVP：TS全部入り＝Next.js＋Supabase＋Vercel