assetPrefix | Next.js - 繁體中文

注意：部署到 Vercel 會自動為你的 Next.js 專案設定全域 CDN。你不需要手動設定 Asset Prefix。

須知：Next.js 9.5+ 新增了對可自訂 Base Path 的支援，這更適合將應用程式托管在像 /docs 這樣的子路徑下。我們不建議你在此使用場景中使用自訂的 Asset Prefix。

要設定 CDN，你可以設定 asset prefix 並配置你的 CDN 來源，使其解析到托管 Next.js 的網域。

打開 next.config.js 並新增 assetPrefix 配置：

next.config.js

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

module.exports = {
  // 在生產環境使用 CDN，開發環境使用 localhost。
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

Next.js 會自動將你的 asset prefix 用於從 /_next/ 路徑 (.next/static/ 資料夾) 載入的 JavaScript 和 CSS 檔案。例如，使用上述配置後，以下對 JS chunk 的請求：

/_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 的請求，但它不會影響以下路徑：

public 資料夾中的檔案；如果你想透過 CDN 提供這些資源，必須自行新增前綴
針對 getServerSideProps 頁面的 /_next/data/ 請求。這些請求將始終針對主網域進行，因為它們不是靜態的。
針對 getStaticProps 頁面的 /_next/data/ 請求。這些請求將始終針對主網域進行，以支援增量靜態生成 (ISR)，即使你沒有使用它（為了保持一致性）。