Menu

assetPrefix

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

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

CDNのセットアップ

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

next.config.mjsを開き、phaseに基づいて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ファイルに対して、自動的に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/リクエスト。これらのリクエストは常にメインドメインに対して実行され、増分静的再生成をサポートします(使用していない場合でも、一貫性のため)。