跳到内容

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/` 的内容,它应该以上述 URL 请求所示的 `_next/static/` 形式上传。不要上传 `.next/` 文件夹的其余部分,因为您不应将服务器代码和其他配置暴露给公众。

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

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