OpenNext入門：Next.jsを自由に動かすためのOSSガイド

はじめに

Next.jsはReactベースの人気フレームワークで、Vercelが公式にホスティングを提供しています。しかし「Vercel以外の環境（AWS、Cloudflare、Denoなど）で動かしたい！」と思ったことはありませんか？

そこで登場するのが OpenNext です。本記事では、初心者向けにOpenNextの概要と、AWS・Cloudflare・Denoとの関係を整理して紹介します。

OpenNextとは？

OpenNextは、Next.jsアプリケーションをVercel以外の環境（特にサーバーレス）向けにアダプトするためのOSS（オープンソースソフトウェア） です。

役割はシンプル：

• Next.jsの公式ビルド出力を解析
• 各クラウド環境に合わせて「動く形式」に変換

つまり「どこでもNext.jsを動かせるようにする仲介ツール」と覚えるとイメージしやすいです。

Vercelとの関係性を理解する

実は、VercelはOpenNext相当の仕組みを自社内部で持っています。Next.jsをVercelにデプロイするとき、裏側では以下のような処理が行われています：

• Next.jsのビルド出力をVercelのインフラに最適化
• SSR/ISR/Edge Functionsを自動的に配置
• 画像最適化やキャッシュを自動設定

OpenNextは、このVercel独自の仕組みをOSS化して、誰でも使えるようにしたもの と考えると分かりやすいです。

誰がOpenNextを作っているのか？

開発主体

OpenNextは SSTチーム（Serverless Stack） が主導して開発されたOSSプロジェクトです。

• SST: サーバーレスアプリケーションの開発を簡単にするフレームワーク
• 貢献者: AWS、Cloudflare、Netlifyなどのクラウドベンダーもアダプター開発に参加
• コミュニティ: 多くの開発者が機能追加やバグ修正に貢献

Vercelの関与は？

興味深いことに、Vercelの直接的な貢献はありません。

• OpenNextは「Vercel非公式」のプロジェクト
• むしろVercelの独占状態に対する「対抗OSS」的な位置づけ
• 「俺たちにもNext.jsを自由に使わせろ！」というコミュニティの声から生まれた

これは、iPhoneに対するAndroidのような関係性に似ています：

• Vercel = iPhone（垂直統合で最適化）
• OpenNext = Android（オープンでどこでも動く）

なぜOpenNextを使うのか？

メリット

• コスト最適化: 既存のAWS環境がある場合、追加コストを抑えられる
• 柔軟な構成: Lambda関数のメモリサイズやタイムアウトを自由に設定
• 既存インフラとの統合: VPC内のリソースへの直接アクセスが可能
• ベンダーロックイン回避: Vercelに依存しない運用が可能
• マルチクラウド対応: 複数のクラウドサービスを併用可能

注意点

• Vercelの一部機能（Edge Middleware等）に制限がある場合がある
• 設定やデプロイがVercelより複雑
• 自己管理の責任範囲が増える
• アップデート対応を自分で行う必要がある
• 最新のNext.js機能への対応が遅れることがある

Next.jsとの関係

• Next.jsはVercel主導で開発されており、公式的にはVercel上での利用が一番スムーズ
• しかし多くの企業・開発者は「AWSで統一したい」「CloudflareのWorkersで動かしたい」といったニーズを持っています
• OpenNextを使うことで、Next.jsをそのまま使いつつ、Vercel以外の基盤でも動作可能に

対応するNext.js機能

• SSR（Server-Side Rendering）: リクエスト時にHTMLを生成
• ISR（Incremental Static Regeneration）: 静的ページを段階的に再生成
• SSG（Static Site Generation）: ビルド時に静的ページを生成
• API Routes: サーバーサイドAPIエンドポイント
• Image Optimization: 画像の自動最適化
• App Router / Pages Router: 両方のルーターに対応

AWSとの関係

AWS上でNext.jsを動かすとき、OpenNextは以下をサポートします：

• Lambda → SSR/ISRの実行
• S3 → 静的ファイルや画像のホスティング
• CloudFront → グローバル配信
• DynamoDB → ISRキャッシュの保存（オプション）

構成イメージ

ユーザー → CloudFront → Lambda（SSR/API）  
                     → S3（静的ファイル）
                     → DynamoDB（ISRキャッシュ）

AWS向けのビルド例

# OpenNextでビルド
npx open-next build --provider aws

# 生成されるディレクトリ構造
.open-next/
├── server-function/          # Lambda用のSSR関数
├── image-optimization-function/  # 画像最適化
├── revalidation-function/    # ISR再検証
└── cache/                    # ISRキャッシュ

AWSはエンタープライズでもよく使われるため、「Vercelは高いからAWSで運用したい」 といったケースでOpenNextが活躍します。

Cloudflareとの関係

Cloudflare Workersは超高速なサーバーレス環境ですが、Node.js互換性に制約があります。そのままではNext.jsを動かすのは難しいですが、OpenNextがこの問題を解決します。

• Workers向けに最適化された成果物を出力
• R2（オブジェクトストレージ）でISRのキャッシュを管理
• Pagesとも組み合わせ可能
• D1（SQLiteデータベース）との連携も可能

Wranglerとの関係

Cloudflare環境では Wrangler（公式CLIツール） が必要です。

• OpenNext → Next.jsをWorkers用に変換
• Wrangler → 変換された成果物をデプロイ

# OpenNextでCloudflare向けにビルド
npx open-next build --provider cloudflare

# Wranglerでデプロイ
wrangler deploy

# wrangler.tomlの設定例
name = "my-nextjs-app"
main = ".open-next/server-function/index.js"
compatibility_date = "2024-01-01"

[[r2_buckets]]
binding = "CACHE_BUCKET"
bucket_name = "nextjs-cache"

👉 OpenNextで変換し、Wranglerでデプロイする のが基本の流れです。

Denoとの関係

Deno Deployは、TypeScript/JavaScriptを直接実行できるクラウド基盤です。Node.js互換も進んでいますが、Next.jsをそのまま動かすのは難しい部分がありました。

OpenNextを使えば：

• Deno Deploy向けの形式に変換
• Deno KVなどストレージサービスと連携可能
• より高速なコールドスタート

👉 Deno Deployユーザーも「Next.jsアプリをそのまま持ち込める」ようになります。

Vercelでストレージを使いたいときは？

Vercelは基本的にホスティングに特化しており、AWS S3のようなオブジェクトストレージは提供していません。ユーザーがアップロードする画像や動画を扱う場合は、以下の選択肢があります：

1. 外部ストレージと連携

// API RouteでS3の署名付きURLを生成
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

export async function POST(request) {
  const signedUrl = await getSignedUrl(
    s3Client,
    new PutObjectCommand({
      Bucket: "my-bucket",
      Key: "file.jpg",
    }),
    { expiresIn: 3600 }
  );
  
  return Response.json({ uploadUrl: signedUrl });
}

選択肢：

• AWS S3
• Cloudflare R2（S3互換でより安価）
• Backblaze B2
• Wasabi

2. BaaSを活用

• Supabase Storage: PostgreSQL + 認証もセット
• Firebase Storage: Google Cloud Storageベース
• Uploadthing: Next.js特化のファイルアップロード

3. Vercel Blob（新機能）

import { put } from '@vercel/blob';

export async function POST(request) {
  const { searchParams } = new URL(request.url);
  const filename = searchParams.get('filename');
  
  const blob = await put(filename, request.body, {
    access: 'public',
  });
  
  return Response.json(blob);
}

👉 小規模ならVercel Blob、本格運用ならS3/R2との連携 が推奨されます。

パフォーマンス比較（目安）

環境	コールドスタート	月額コスト（小規模）	スケーラビリティ	設定の複雑さ	ストレージ
Vercel	最速（〜200ms）	$20〜	自動	簡単	Blob（制限あり）
AWS + OpenNext	中速（〜500ms）	$5〜	手動設定	複雑	S3（無制限）
Cloudflare Workers	高速（〜100ms）	$5〜	自動	中程度	R2（安価）
Deno Deploy	高速（〜150ms）	$10〜	自動	簡単	Deno KV

実際のプロジェクト例

• ECサイト: EC2からLambda移行でコスト70%削減、自動スケーリング実現
• SaaSダッシュボード: CloudflareのWorkersで全世界50ms以下のレスポンス
• 企業サイト: 既存AWS環境との統合でセキュリティ要件をクリア
• メディアサイト: ISR活用で記事の更新を自動化
• スタートアップ: Vercel→AWS移行で月額$500→$50に削減

これからのWebはOpenNextが標準になるのか？

事実上の標準になりつつある理由

1. 複数クラウドベンダーの参加

   • AWS、Cloudflare、Netlifyが積極的にアダプター開発
   • 単なる趣味OSSではなく「業界標準」への動き

2. エンタープライズ採用の増加

   • 大企業は既存のAWS環境との統合を重視
   • コンプライアンス要件でVercel以外が必要なケースも

3. Next.jsの普及

   • フロントエンドのデファクトスタンダード
   • その運用基盤としてOpenNextも必然的に広がる

今後の展望

個人・小規模開発
  ↓
Vercel（簡単・高速）

企業・大規模開発
  ↓
OpenNext + AWS/Cloudflare（柔軟・安価）

👉 「Vercel以外でNext.jsを動かす事実上の標準」としてOpenNextが定着
👉 ただしVercelの簡単さは圧倒的なので、用途による使い分けが進む

実装例：シンプルなNext.jsアプリのデプロイ

// app/page.js（App Router）
export default function Home() {
  return (
    <div>
      <h1>OpenNextで動くNext.js！</h1>
      <p>レンダリング時刻: {new Date().toISOString()}</p>
    </div>
  );
}

// ファイルアップロード機能も追加
// app/api/upload/route.js
import { put } from '@vercel/blob'; // Vercelの場合
// または
import { S3Client } from "@aws-sdk/client-s3"; // AWSの場合

export async function POST(request) {
  // 環境に応じてストレージを選択
  if (process.env.VERCEL) {
    const blob = await put('file.jpg', request.body);
    return Response.json(blob);
  } else {
    // S3やR2にアップロード
  }
}

# 1. OpenNextをインストール
npm install -D open-next

# 2. ビルド（AWS向け）
npx open-next build --provider aws

# 3. デプロイ（AWS CDKやServerless Frameworkを使用）
cdk deploy
# または
serverless deploy

バージョン互換性

Next.js Version	OpenNext Version	推奨Node.js	対応状況
14.x	3.x	18+	完全対応
13.x (App Router)	2.x	16+	対応
12.x	1.x	14+	レガシー

※ 最新の互換性情報は公式リポジトリを確認してください

その他の環境

OpenNextは進化を続けており、以下の環境にも対応が広がっています：

• Bun runtime: より高速なJavaScriptランタイム
• Docker/Kubernetes: コンテナベースのデプロイ
• Google Cloud Run: Googleのサーバーレス環境
• Azure Functions: Microsoftのサーバーレス環境

まとめ

• OpenNextはNext.jsをVercel以外で動かすコミュニティ主導のOSS
• SSTチームが主導、クラウドベンダーも参加する共同プロジェクト
• VercelはOpenNext相当を内部で実装、OpenNextはそれをOSS化
• AWS → Lambda + S3 + CloudFrontで本格的な運用が可能
• Cloudflare → Workers + R2で高速配信、Wranglerでデプロイ
• Deno → Deploy環境でTypeScriptネイティブな実行
• ストレージ → Vercelは外部連携が基本、Blobも登場
• 将来 → Vercel以外でNext.jsを動かす事実上の標準に

OpenNextが向いているケース

✅ 既存のクラウドインフラを活用したい
✅ コストを最適化したい
✅ 特定のリージョンにデータを置く必要がある
✅ カスタマイズ性を重視する
✅ マルチクラウド戦略を取りたい

Vercelのままが良いケース

✅ 最速のデプロイとパフォーマンスが必要
✅ 設定の簡単さを重視
✅ Vercelの最新機能をすぐに使いたい
✅ 運用の手間を最小化したい
✅ 小規模プロジェクトや個人開発

👉 Next.jsをもっと自由に動かしたい人には必須のプロジェクト！

📎 参考リンク

• OpenNext GitHub
• OpenNext公式ドキュメント
• SST公式サイト
• Next.js公式ドキュメント
• Vercel Blob Storage
• AWS Lambda
• Cloudflare Workers
• Deno Deploy