next.js cdn部署

设置静态资源前缀

文档
打包命令中指定环境REACT_APP_ENV

"build-test": "REACT_APP_ENV=test ...",
"build-uat": "REACT_APP_ENV=uat ...",
"build-prod": "REACT_APP_ENV=prod ...",

next.config.js文件

let assetPrefix = '';
if(process.env.REACT_APP_ENV === 'test') {
  assetPrefix = '//cdn.test.wangyu.com';
}
if(process.env.REACT_APP_ENV === 'uat') {
  assetPrefix = '//cdn.uat.wangyu.com';
}
if(process.env.REACT_APP_ENV === 'prod') {
  assetPrefix = '//cdn.wangyu.com';
}
module.exports = {
  assetPrefix, // 静态资源路径
}

图片文件前缀

Next.js will automatically use your prefix in the scripts it loads, but this has no effect whatsoever on the public folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself

一种实现方式
在next.config.js中添加env配置

module.exports = {
  env: {
    staticPath: '//mycdn.com/...',
  },
}

在需要的地方

<footer>
  <a
    href=""
    target="_blank"
    rel="noopener noreferrer"
  >
    Powered by <img src={`${process.env.staticPath}/zeit.svg`} alt="ZEIT Logo" />
  </a>
</footer>

其它

next.js官网