Menu

assetPrefix

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

補足: Next.js 9.5以降では、/docsのようなサブパスにアプリケーションをホスティングするのに適した、カスタマイズ可能なベースパスのサポートが追加されました。 この使用例にカスタムアセットプレフィックスを使用することはお勧めしません。

CDNのセットアップ

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

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

next.config.mjs
// @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/リクエスト。インクリメンタル静的再生成を使用していない場合でも、一貫性を保つためにメインドメインに対して常にリクエストが行われます。