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 配置：

// @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 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)，即使您沒有使用此功能（為了保持一致性）。