【Next.js和訳】API/next.config.js/CDN Support with Asset Prefix
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、next.config.js/CDN Support with Asset Prefixの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
CDN Support with Asset Prefix
注意 : Vercel へのデプロイでは、Next.js プロジェクトにグローバル CDN が自動的に設定されます。アセットプレフィックスを手動で設定する必要はありません。
注意 : Next.js 9.5+では、カスタマイズ可能なBase Pathがサポートされました。これは、/docsのようなサブパスにアプリケーションをホスティングするのに適しています。この用途では、カスタムのアセットプレフィックスを使用することはお勧めできません。
CDNを設定するには、アセットプレフィックスを設定し、CDN のオリジンが Next.js がホストされているドメインに解決するように設定します。
next.config.jsを開き、assetPrefixの設定を追加します。
const isProd = process.env.NODE_ENV === "production"
module.exports = {
// 本番環境ではCDNを使用し、開発環境ではlocalhostを使用します。
assetPrefix: isProd ? "https://cdn.mydomain.com" : "",
}
Next.js は、/_next/パス（.next/static/フォルダ）から読み込む JavaScript や CSS ファイルに、自動的に assetPrefix を使用します。例えば、上記の設定の場合、次のような 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/としてアップロードする必要があります。**サーバーコードやその他の構成を公開してはいけないからです。
assetPrefixは、_next/staticへのリクエストを対象としていますが、以下のパスには影響しません。
- publicフォルダ内のファイル。これらのアセットを CDN で提供したい場合には、自分でプレフィックスを導入する必要があります。
-
getServerSidePropsページに対する/_next/data/リクエスト。これらのリクエストは、静的なものではないので、常にメインドメインに対して行われます。 -
/_next/data/getStaticPropsページに対するリクエストです。これらのリクエストは、Incremental Static Generationをサポートするために、たとえそれを使用していなくても、常にメインドメインに対して行われます(一貫性のため)。
Discussion