assetPrefix

注意: Vercelへのデプロイでは、Next.jsプロジェクトのグローバルCDNが自動的に設定されます。 Asset Prefixを手動で設定する必要はありません。

豆知識: Next.js 9.5以降では、/docsのようなサブパスでアプリケーションをホストする場合に適したカスタマイズ可能なBase Pathがサポートされています。 このようなユースケースでは、カスタムのAsset Prefixを使用することは推奨しません。

CDNの設定

CDNを設定するには、asset prefixを設定し、CDNのオリジンがNext.jsがホストされているドメインを解決するように構成します。

next.config.mjsを開き、phaseに基づいて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ファイルに対して、自動的にasset prefixを使用します。例えば、上記の設定では、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 Generation（増分的静的生成）をサポートするため、使用していない場合でも（一貫性のために）、これらのリクエストは常にメインドメインに対して行われます。