Next.js Static Exportまとめ

##　曖昧だったので整理していく

`next.config.ts`で`output: "export"`を設定すると、Next.jsは完全な静的サイトとして出力される
これにより、サーバーレスで高速・低コストなホスティングが可能

## 開発モード vs 本番モード

### 開発モード（`npm run dev`）
- **用途**: 開発・デバッグ
- **キャッシュ**: 無効（毎回データ取得）
- **API**: ページアクセスごとに呼ばれる
- **特徴**: ホットリロードで即座に変更反映

### 本番モード（`npm run build` + 静的配信）
- **用途**: 本番環境へのデプロイ
- **キャッシュ**: 有効（ビルド時に静的生成）
- **API**: ビルド時のみ呼ばれる
- **特徴**: 超高速・APIコール最小限

## コマンド一覧


# 開発モード起動
npm run dev

# 本番ビルド（静的ファイル生成）
npm run build

# ローカルで本番動作確認
npx serve@latest out

# デプロイ（Cloudflare Pagesなど）
# → outディレクトリをアップロード


## 重要なポイント

### できること
- 完全な静的HTML/CSS/JSの生成
- CDN配信（Cloudflare Pages, Vercel, Netlifyなど）
- ビルド時のデータ取得（SSG）
- クライアントサイドでの動的機能（React）

### できないこと
- `next start`コマンド（サーバーが不要なため）
- ISR（Incremental Static Regeneration）
- サーバーサイドAPI Routes
- リアルタイムのデータ取得




**参考リンク**
- [Next.js Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)
- [Cloudflare Pages](https://pages.cloudflare.com/)