跳至内容

assetPrefix

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

了解一下:Next.js 9.5+ 添加了对可自定义的 基本路径 的支持,这更适合在子路径(如 /docs)上托管您的应用程序。我们建议您不要在此用例中使用自定义资产前缀。

设置 CDN

要设置 CDN,您可以设置资产前缀并将 CDN 的源配置为解析到 Next.js 托管的域名。

打开 next.config.mjs 并根据 阶段 添加 assetPrefix 配置。

next.config.mjs
// @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 文件使用您的资产前缀。例如,使用上述配置,以下对 JS 块的请求

/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

将改为

https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js

将文件上传到给定 CDN 的确切配置将取决于您选择的 CDN。您需要在 CDN 上托管的唯一文件夹是 .next/static/ 的内容,应将其上传为 _next/static/,如上述 URL 请求所示。不要上传 .next/ 文件夹的其余部分,因为您不应将服务器代码和其他配置公开给公众。

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

  • public 文件夹中的文件;如果您想通过 CDN 提供这些资产,则需要自己引入前缀。
  • /_next/data/ 请求 getServerSideProps 页面。这些请求将始终针对主域名发出,因为它们不是静态的。
  • /_next/data/ 请求 getStaticProps 页面。即使您没有使用它(为了保持一致性),这些请求也将始终针对主域名发出,以支持 增量静态生成