assetPrefix

注意: Vercel へのデプロイは、Next.js プロジェクトにグローバル CDN を自動的に設定します。アセットプレフィックスを手動で設定する必要はありません。

知っておくと良いこと: Next.js 9.5 以降では、カスタマイズ可能な Base Path がサポートされており、これは /docs のようなサブパスにアプリケーションをホストするのに適しています。このユースケースでは、カスタムアセットプレフィックスの使用は推奨しません。

CDN の設定

CDN を設定するには、アセットプレフィックスを設定し、Next.js がホストされているドメインを解決するように CDN のオリジンを設定します。

next.config.mjs を開き、フェーズに基づいて assetPrefix 設定を追加します。

// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'
 
export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
  }
  return nextConfig
}

Next.js は、/_next/ パス (.next/static/ フォルダ) から読み込む JavaScript および CSS ファイルに、アセットプレフィックスを自動的に使用します。たとえば、上記の構成では、JS チャンクへの次のリクエストは次のようになります。

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

代わりに次のようになります。

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

指定された CDN にファイルをアップロードするための正確な設定は、選択した CDN によって異なります。CDN でホストする必要があるのは .next/static/ の内容のみであり、上記の URL リクエストが示すように _next/static/ としてアップロードする必要があります。.next/ フォルダの残りの部分はアップロードしないでください。サーバーコードやその他の設定を公開すべきではありません。

assetPrefix は _next/static へのリクエストをカバーしますが、次のパスには影響しません。

• public フォルダ内のファイル。これらのアセットを CDN 経由で提供したい場合は、自分でプレフィックスを導入する必要があります。
• getServerSideProps ページのリクエストに対する /_next/data/。これらは静的ではないため、常にメインドメインに対して行われます。
• getStaticProps ページのリクエストに対する /_next/data/。これらは、(一貫性のために) 使用していない場合でも、Incremental Static Regeneration をサポートするために常にメインドメインに対して行われます。