assetPrefix | Next.js - 简体中文

注意：部署到 Vercel 会自动为您的 Next.js 项目配置全局 CDN。您无需手动设置资源前缀 (Asset Prefix)。

须知： Next.js 9.5+ 版本增加了对可自定义基础路径 (Base Path) 的支持，该功能更适合将应用程序托管在子路径下（如 /docs）。对于这种使用场景，我们不建议使用自定义资源前缀 (Asset Prefix)。

要设置 CDN，您可以配置资源前缀并将 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 会自动为从 /_next/ 路径（.next/static/ 文件夹）加载的 JavaScript 和 CSS 文件使用您配置的资源前缀。例如，使用上述配置后，原本的 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 的请求，但它不会影响以下路径：

public 文件夹中的文件；如果您希望通过 CDN 提供这些资源，需要自行添加前缀
针对 getServerSideProps 页面的 /_next/data/ 请求。这些请求将始终针对主域名发起，因为它们不是静态的。
针对 getStaticProps 页面的 /_next/data/ 请求。这些请求将始终针对主域名发起以支持增量静态生成 (Incremental Static Generation)，即使您没有使用该功能（为了保持一致性）。