NextJS 静态导出

3个月前

直接在 Vercel 上部署 NextJS, 虽然很方便, 但是也有一些问题:

  1. 需要自定义域名国内才能访问, 且速度可能会有点慢
  2. 网站多了或者流量大了之后, Vercel 或者其他的服务商会收费.

对于国内的开发者而言, 一个比较好的思路是, 购买一个低价的服务器, 然后单独部署 NextJS.
这里的部署有两种路径, 一个是有后端的部署(需要读写数据库, 或者动态SSR之类的), 另一种则是这篇文章要说的静态部署.

静态部署的优点

不占用过多的服务器资源, 访问速度非常快, 一些CMS的建站程序, 为了能提升性能, 都支持生成静态HTML, 这样每次我们打开一个页面, 服务器就不用重新连接数据库渲染了.

只需要在 next.config.js中配置

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export', 
}

module.exports = nextConfig

即可在 每次 next build之后生成 静态网页. 然后我们就可以像部署 SPA 一样部署 NextJS的应用了.