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 的请求,但它不影响以下路径
- public 文件夹中的文件;如果您希望通过 CDN 提供这些资产,则需要自行引入前缀
这有帮助吗?