VercelでのNext.jsホスティングコストを削減するためのサードパーティCDNの使用方法

Next.jsフレームワークは、高性能なReactアプリケーションを構築するための最良の選択肢です。Next.jsの親会社であるVercelは、優れたデプロイメント体験を提供しており、Next.jsのデプロイメントに推奨されるプラットフォームとなっています。

しかし、この利便性には、見過ごされがちな大きなコストが伴う可能性があります。

Vercelの高速データ転送とその帯域幅コスト

Next.jsプロジェクトをVercelでデプロイする際、エッジネットワークを介して転送されるすべてのデータ（ページ、APIルート、静的アセットなど）は、「高速データ転送」としてカウントされます。これは基本的にVercelのコンテンツデリバリーネットワーク（CDN）サービスです。

Vercelの無料ホビープランには、毎月100GBの高速データ転送が含まれています。これは個人プロジェクトや小規模なアプリケーションには十分かもしれませんが、トラフィックがやや多いプロジェクトや、突然のトラフィック急増の場合、無料クォータを超えると1GBあたり約0.15ドルの追加料金が発生します。

他の主要なクラウドサービスプロバイダーと比較して、この価格はかなり高価です。

• Amazon CloudFrontは、帯域幅価格が0.085ドル/GBであり、Vercelの約半額です。
• CDNを含まない（したがって通常はデータ転送が高価な）AWS S3でさえ、価格はわずか0.09ドル/GBであり、Vercelよりも安価です。
• Cloudflareは無料CDN帯域幅を提供しています。

これは、意図せず運用コストに大きな圧力をかける可能性があります。

Vercelの高速データ転送を回避する方法

幸いなことに、Next.jsフレームワークの柔軟性により、Vercelの高速データ転送を回避し、静的アセットのトラフィックをより安価なサードパーティCDNサービスで処理することができます。

このソリューションの核心は、Next.jsの設定ファイルnext.config.jsを変更し、プロジェクトのビルドとデプロイメントプロセスを調整することにあります。

ステップ1：assetPrefixの設定

assetPrefixはnext.config.jsの重要なパラメータであり、Next.jsアプリケーションのすべての静的アセット（JavaScript、CSS、画像など）のURLプレフィックスを指定できます。これをCDNアドレスに設定すると、Next.jsはHTMLページを生成する際に、静的アセットへの参照を自動的にCDNにポイントします。

静的アセットを別のCDNにアップロードし、カスタムドメインhttps://cdn.yourdomain.com経由でアクセスできると仮定した場合の設定例を以下に示します。

const nextConfig = {
  // assetPrefixは本番環境でのみ有効にします
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
};

export default nextConfig;

重要なポイント：

• assetPrefixの値は、CDNサービスのアクセスURLである必要があります。
• ローカル開発に影響を与えないように、この設定は本番環境（process.env.NODE_ENV === 'production'）でのみ有効にすることが推奨されます。

ステップ2：画像最適化の処理

デフォルトでは、Next.jsの<Image>コンポーネントはVercelのサーバーを介して画像をリアルタイムで最適化します。これは、assetPrefixを設定した場合でも、画像リクエストはVercelのサービスを経由し、帯域幅コストが発生することを意味します。

画像もすべて独自のCDNで提供されるようにするには、next.config.jsでNext.jsの組み込み画像最適化機能を無効にする必要があります。

const nextConfig = {
  // assetPrefixは本番環境でのみ有効にします
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

images.unoptimized = trueを設定すると、<Image>コンポーネントのsrcはassetPrefixで定義されたパスを直接使用し、画像トラフィックがサードパーティCDNで完全に処理されることが保証されます。

ステップ3：ビルドとアップロード

設定が完了したら、デプロイメントプロセスを調整する必要があります。

1. プロジェクトを通常通りビルドします： npm run buildを実行します。ビルドが完了すると、CDNにアップロードする必要のあるすべての静的アセットが.next/staticディレクトリに生成されます。
2. CDNにアップロードします： .next/staticディレクトリ内のすべてのファイルをサードパーティCDNサービスにアップロードする必要があります。アップロード後のファイルパスがassetPrefixで設定されたパスと一致することを確認することが重要です。たとえば、ローカルファイル.next/static/css/main.cssは、CDN上でhttps://cdn.yourdomain.com/_next/static/css/main.cssでアクセス可能であるべきです。これは、staticディレクトリをCDNバケット内の_next/staticディレクトリとしてアップロードする必要があることを意味します。
3. アプリケーションをデプロイします： 最後に、.next/staticを除いたビルド出力の残りの部分をVercelのようなプラットフォームにデプロイします。

これらのステップに従うことで、Next.jsプロジェクトの静的アセットトラフィックをよりコスト効率の高いCDNに正常に転送し、Vercelからの高額な帯域幅請求を効果的に回避できます。

より簡単な解決策はありますか？

CDNの設定と管理を手動で行うのが面倒だと感じるものの、Vercelよりもコスト効率の高いデプロイメントソリューションを望むなら、Leapcellは検討する価値のある選択肢です。

LeapcellはNext.jsプロジェクトのワンクリックデプロイメントも提供しており、組み込みのグローバルCDNアクセラレーション機能が含まれているため、手動設定は一切不要です。

Vercelとは異なり、LeapcellのCDNアクセラレーションサービスは完全に無料で、超過帯域幅料金の心配もありません。

私たちは、Vercelよりも開発者に優しく、より良心的な代替手段であることを目指しています。

今すぐLeapcellにアクセスして、ご自身で体験してください。