OpenNext で Vercel の代わりに格安でNext.js をデプロイする

OpenNext は、AWS 上で Next.js アプリケーションをデプロイするためのオープンソースプロジェクト です。Next.js の App Router を含む最新バージョンにも対応していて、Vercel なしで Next.js をスケール可能なサーバーレス環境にデプロイできるのが特徴です。

💡 OpenNext の利用ケース

こういった方におすすめ。

✅ Vercel の料金が高い → 自前で Next.js のホスティングを構築したい
✅ AWS をメインで使っている → Next.js を AWS サーバーレスで動かしたい
✅ Next.js の Edge Functions を AWS 上で運用したい
✅ App Router の機能を活かしつつ、Vercel 依存をなくしたい

🚀 OpenNext の特徴

1. AWS Lambda / Lambda@Edge / CloudFront に対応

• Next.js の各種機能（ISR、SSG、SSR、API Routes など）を AWS のサービスに最適化してデプロイ可能。
• Edge Functions もサポートし、パフォーマンスを向上。

Vercel との比較

2. Vercel のようなエクスペリエンスを AWS 上で再現

Next.js の App Router / Pages Router に対応しつつ、CloudFront と Lambda@Edge で最適なレスポンスを提供。

3. Infrastructure as Code (IaC) 向けのサポート

AWS CDK, Serverless Framework, Terraform などで簡単にデプロイ可能。

4. ISR（Incremental Static Regeneration）のサポート

S3 と Lambda を活用し、動的にコンテンツを再生成可能。

5. 料金最適化

Vercel のような従量課金モデルではなく、AWS のコスト構造を活かして低コストで運用可能。

1. OpenNext のバックエンド構成

OpenNext は AWS Lambda だけでなく、Amazon ECS や AWS Fargate へのデプロイにも対応しています。特に、Lambda のコールドスタートの影響を避けたい場合には Fargate を利用する選択肢があります。

Fargate を使うと、コンテナを管理することなく、アプリケーションをスケーラブルに運用できるため、特に高トラフィックなアプリケーションに適しています。

2. OpenNext のキャッシュ最適化

OpenNext における ISR（Incremental Static Regeneration）のキャッシュ最適化は、S3 にキャッシュを保存し、CloudFront 経由で配信される仕組みです。Cache-Control ヘッダーの設定がパフォーマンスに与える影響は大きく、適切な設定を行うことで、リクエストの応答時間を短縮できます。

また、stale-while-revalidate を活用しながらバックグラウンドでのキャッシュ更新が行われるため、ユーザーは常に最新のコンテンツにアクセスできます。

3. OpenNext のデプロイ戦略

現在の記事では npx open-next deploy を利用したデプロイ方法が記載されていますが、実際の運用では Infrastructure as Code（IaC）の活用が重要です。

AWS CDK や Serverless Framework、Terraform などを用いることで、環境ごとのデプロイ管理が容易になり、コードとしてインフラを管理することができます。これにより、再現性のあるデプロイが可能になり、チーム全体での運用がスムーズになります。

4. OpenNext の制約や課題

OpenNext の制約として、AWS Lambda の 15 分の実行時間制限があるため、大規模な SSR を行う場合には不向きです。この場合、代替手段として AWS Fargate の利用が考えられます。

また、Vercel の Edge Functions とは異なり、OpenNext の Edge Functions は Lambda@Edge に依存しており、その影響で Node.js ベースの挙動になります。これにより、特定の機能やパフォーマンスに制約が生じる可能性があります。

Next.js (OpenNext) + Cloudflare Workers

この組み合わせについても検討してみましょう。

Cloudflare Workers は Next.js のサーバーレス環境として適しており、特に KV (Key-Value Storage) を使った動的キャッシュ は効果的。

Cloudflare Workers の KV (Key-Value Storage) を活用することで 動的キャッシュが効くので、Next.js の以下の機能が適切に動作します。

• PPR (Partial Prerendering) → 事前レンダリングと動的レンダリングのハイブリッド
• ISR (Incremental Static Regeneration) → 一部のページを動的に再生成
• Better Auth → 認証機能の強化

🛠 OpenNext のデプロイ方法

1 OpenNext のセットアップ

2 必要な環境変数を設定

3 デプロイ

まとめ

OpenNext は、Next.js のパフォーマンスを維持しつつ、AWS でコストを抑えながら運用したい人に最適な選択肢です。

• Vercel のコストが気になる → OpenNext で AWS にデプロイ
• Next.js の Edge Functions を AWS で使いたい → OpenNext が対応
• IaC で Next.js を管理したい → AWS CDK や Terraform と組み合わせて運用可能

AWS をメインに運用するなら、Vercel からの移行も視野に入るかもしれません。