assetPrefix

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

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

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チャンクに対する以下のリクエストは

#4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

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

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

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

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

publicフォルダー内のファイル。これらのアセットをCDN経由で提供したい場合は、ご自身でプレフィックスを導入する必要があります。
/_next/data/のgetServerSidePropsページへのリクエスト。これらは静的ではないため、常にメインドメインに対して行われます。
/_next/data/のgetStaticPropsページへのリクエスト。これらは、使用していない場合でも (一貫性のために) インクリメンタル静的生成をサポートするため、常にメインドメインに対して行われます。

この情報はお役に立ちましたか？