API リファレンスnext.config.js オプションassetPrefix

assetPrefix

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

知っておくと便利です: Next.js 9.5 以降では、カスタマイズ可能なベースパスのサポートが追加されました。これは、/docs のようなサブパスでアプリケーションをホストする場合に適しています。このユースケースでは、カスタムアセットプレフィックスを使用することはお勧めしません。

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

#4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

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

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

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

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

public フォルダー内のファイル。これらのアセットを CDN 経由で提供する場合は、自分でプレフィックスを導入する必要があります

これは役に立ちましたか？