Next.jsのインフラ構成案

Next.js × AWSで実現するWebアプリのインフラ構成

こんにちは、オアシステクノロジーズの古本です！
今回は Next.jsをAWSにデプロイする際の構成パターンと実装の考え方 について紹介します。

---

🏗 インフラ構成の代表パターン3選

① 静的ホスティング構成（SSG + CDN）

• next export でビルドし、S3 + CloudFrontでホスティング
• シンプル・安価で高速
• 完全静的なWebサイト向き（LPやドキュメント）

② Lambda@Edge構成（VercelライクなSSR構成）

• serverless-next.js などで構築
• グローバルにSSRでき、初期表示が高速
• 動的コンテンツとSEOを両立できるが構成は複雑

③ App Runner / ECS構成（Nodeサーバ常駐型）

• next build → next start 実行形式で常駐
• SSR + APIを1つのコンテナで処理できる
• 運用・コストのバランスが課題

---

📊 構成パターンの比較表

構成	メリット	デメリット	向いている用途
SSG + S3/CloudFront	高速・安価・構成が簡単	動的処理不可	静的サイト
Lambda@Edge構成	エッジSSRで初期表示が高速	実装がやや複雑	SEO対応SPA
App Runner / ECS構成	柔軟な構成・API統合可能	コスト・保守負荷	BtoB業務アプリ

---

🔌 APIの提供方法（BFF構成）

🟩 Option 1: Next.js API Routes（App Router / Pages Router）

• /api/xxx.ts のように、Next.js内にAPIを実装
• SSRとの連携が容易で、小規模なアプリでは便利

メリット:

• 実装が簡単、APIとUIを同一リポジトリで管理できる
• フロントエンド開発者でも扱いやすい

デメリット:

• 責務が混在しがち（ビューとロジックの分離が曖昧）
• 大規模開発やマイクロサービスには不向き

---

🟨 Option 2: API Gateway + Lambda（サーバレスBFF構成）

[Next.js Frontend] → [API Gateway] → [Lambda (BFF)]

• BFFをLambda関数として構築し、API Gateway経由で公開
• 認証・認可処理もこのレイヤーに実装可能

メリット:

• 完全サーバレスでスケーラブル
• 小規模〜中規模のAPIには最適
• メンテ不要・コスト安価

デメリット:

• コールドスタートの影響あり
• WebSocketや長時間の接続には不向き

---

🟥 Option 3: 常駐型APIアプリケーション（ECS / EC2 / App Runner）

[Next.js Frontend] → [ALB / Nginx] → [NestJS / Express / FastAPI など]

• APIを別プロセス・別コンテナ・別EC2上で常時稼働
• Node.js（Express/NestJS）やPython（FastAPI）などを利用

メリット:

• 状態を持った処理、リッチなAPI実装に向く
• 責務分離が明確で、スケールや開発チームの分担がしやすい

デメリット:

• インフラ保守コスト（監視・デプロイ・オートスケール）が発生
• 運用設計やCI/CD構築が必須

---

📋 比較表まとめ

構成方式	特徴	スケーラビリティ	管理コスト	向いている用途
Next.js API Routes	同一プロジェクトで完結	△	◎	小規模サービス
API Gateway + Lambda	サーバレスAPI	◎	◎	中規模サービス
ECS / EC2 常駐API	別プロセスの高機能API	◎	△	大規模・長期運用サービス

---

🔐 認証・認可の考え方

フロントエンド（Next.js）

• Cookieベースのセッション管理が主流（HttpOnly/Secure推奨）
• next-auth, Auth0, Cognito Hosted UI を活用
• UI制御と認証状態の保持が主な責務

BFF/APIレイヤー

• JWTの検証やアクセストークンの検証を行う
• RBAC（ロールベース）やABAC（属性ベース）での認可ロジックを実装
• 認証・認可を中央集権的に担保

---

🛡 認証方式の比較

認証方式	特徴	主な用途
Auth0 / OIDC	外部IdPと連携しやすくSAML/OAuth対応	エンタープライズ連携
AWS Cognito	AWSサービスとの統合が容易	サーバレス構成
next-auth	柔軟かつNext.jsに最適化	カスタム実装やSNS連携など

---

✅ まとめ

• Next.jsは目的に応じてSSG/SSR/APIを柔軟に切り替えられる
• デプロイ方式によってコスト・開発体験・性能が大きく変わる
• API構成や認証基盤もスケールやチーム構成に応じて設計することが重要

---

🔗 参考リンク

• Next.js公式
• serverless-next.js
• AWS App Runner
• next-auth
• AWS Cognito