︙

assetPrefix

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

Good to know: Next.js 9.5+は、カスタマイズ可能な基本 Pathをサポートし、これはより良い /docsのようなサブ path でアプリケーションをホストするのに適しています。我々は、このユースケースについて、カスタム Asset Prefix を使用することをお勧めしません。

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

next.config.jsを開き、assetPrefixの config を追加します:

next.config.js

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

Next.js は、/_next/ path からロードされる JavaScript および CSS ファイルに対して自動的にアセットプレフィックスを使用します(.next/static/ フォルダ)。例えば、上記の設定で、JS チャンクに対する次の request：

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

代わりになる：

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

指定された CDN にファイルをアップロードするための正確な設定は、選択した CDN に依存します。CDN 上でホストする必要があるのは、.next/static/の内容だけで、それは上記の URL request が示すように_next/static/としてアップロードされるべきです。あなたの.next/フォルダの残りをアップロードしないでください、あなたの server コードやその他の設定を公開すべきではありません。

assetPrefixは_next/staticへの Request をカバーしていますが、次の paths には影響を与えません：

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