assetPrefix

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

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

CDNのセットアップ

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

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経由で配信したい場合は、自分でプレフィックスを導入する必要があります。