assetPrefix

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

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

CDNを設定する

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

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

CDNを設定する​

CDNを設定する