nextjs发布到静态资源到CDN，访问图片报错Url parameter not allowed

为了提高页面访问速度，通常会把文件上传到CDN，nextjs提供了一个配置 assetPrefix 来实现，我们只需要在 next.config.js 里面配置 assetPrefix 即可：

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
 // 生产环境CDN域名
 assetPrefix: isProd ? 'https://static.kelen.com' : undefined,
}

这样请求的资源就会从原先的「服务域名」变成「CDN域名」，举个例子，原来的资源路径是：

https://www.kelen.cc/_next/static/chunks/123456.js

新的资源路径就变成：

https://static.kelen.com/_next/static/chunks/123456.js

注意：上传CDN的资源应该只限制 .next/static/ 目录下的资源，不应该上传其他资源，防止服务敏感信息泄漏。

url parameter not allowed

配置完上线后访问页面，发现某些有一些图片404，图片的格式一般是 https://www.kelen.cc/_next/image?url=https%3A%2F%2Fstatic.kelen.com%2Fimages%2Favatar.jpg&w=384&q=75 ，报错 url parameter not allowed ，那么为什么有些图片可以正常访问，有些图片就报错呢？

通过阅读源码可以发现，nextjs 对 Image 组件的图片，会通过自己的服务做中转请求，然后返回给客户端，相当于通过 _next/image 这个接口来获取静态资源的图片，然而并非所有的图片都会去获取，只有指定域名才行。所以解决这个问题的方法就是在 next.config.js 里面配置 images 选项，指定允许的域名：

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  // 生产环境CDN域名
  assetPrefix: isProd ? 'https://static.kelen.com' : undefined,
  images: {
    domains: ['static.kelen.com'],
  },
}

通过上述配置后，就可以正常解决问题了，不过 domains 这个配置在 Nextjs14 之后会废弃，取而代之的是 remotePatterns。

remotePatterns

Nextjs 集成了 Image 组件的一些优化功能，为了防止用户恶意攻击，我们需要确保只有信任来源的图片才进行图片优化，remotePatterns 配置项就可以解决这个问题。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'static.kelen.cc',
        port: '',
        pathname: '/',
      },
    ],
  },
}

通过上述配置，重新部署，问题即可完美解决。