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へのリクエストをカバーしていますが、以下のパスには影響しません: