Menu

assetPrefix

注意: 部署到 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 选择。您需要上传的唯一文件夹是 .next/static/ 的内容,应将其作为 _next/static/ 上传,如上述 URL 请求所示。不要上传 .next/ 文件夹的其余部分,因为您不应将服务器代码和其他配置公开。

虽然 assetPrefix 覆盖了对 _next/static 的请求,但它不影响以下路径:

  • public 文件夹中的文件;如果您想通过 CDN 提供这些资源,您需要自己引入前缀