introduction

注意部署在Vercel中自动为你的Next.js 项目配置全局CDN,你不需要手动的配置一个资源前缀 ..

Next.js 9.5+ 增加了对可自定义的

Base Path

的支持 …

这能够更好的托管你的应用到一个子路径上(例如/docs),这种情况下不建议使用资源前缀 …(Asset Prefix)

为了配置一个CDN,你能够配置一个资源前缀并且配置你的CDN的源头去解析Next.js 托管所在的域名 …

打开next.config.js并增加assetPrefix配置

  1. const isProd = process.env.NODE_ENV === 'production'
  3. module.exports = {
  4.   // Use the CDN in production and localhost for development.
  5.   assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
  6. }

Next.js 将为从/_next路径中(.next/static/目录)加载的js 和css 文件使用资源前缀 … 举个例子,使用上面的配置,请求一个js chunk如下:

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

将会替代为

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

为了对给定的CDN 上传文件的完整配置将依赖于你的CDN 选择, 仅仅有一个目录你需要托管在你的CDN上是.next/static/的内容,这应该被能够被上传为_next/static/,如上述URL 请求指示那样 .. 不需要上传.next/目录的其他部分 … 因为你不需要暴露你的服务器代码以及其他配置公开 …

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

  • 在公共目录中的文件,如果你想要通过CDN 提供这些资源,你需要自己引入一个前缀 ..
  • 对于getServerSideProps页面的/_next/data/请求,这些请求将始终针对主域发出，因为它们不是静态的。（也就是CDN 只能传递静态内容)
  • 对于具有getStaticProps的/_next/data请求,这些请求总是针对主域发出去支持增量静态生成,即时你没有使用它(为了一致性) …