assetPrefix

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

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

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ファイルに、自動的にAsset Prefixを使用します。たとえば、上記の設定では、JSチャンクに対する以下のリクエストは

#4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

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

https://cdn.mydomain.com#4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

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

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

• public フォルダ内のファイル。これらのアセットをCDN経由で提供したい場合は、自分でプレフィックスを導入する必要があります。