如何配置构建Next.js应用实现无Node.js的静态站点部署

可以实现，Next.js 13+ 提供了静态导出能力，构建后的产物全为静态资源，可直接部署在任意静态托管服务中，无需依赖Node.js运行环境，所有路由也可完全由客户端侧处理。

• 第一步：修改项目根目录下的next.config.js配置，新增output: 'export'参数，示例配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启静态导出模式
  output: 'export',
  // 可选：若部署在域名子路径下，补充子路径配置
  // basePath: '/demo-project',
  // 可选：开启路径后缀带斜杠，适配部分静态托管服务的路由规则
  // trailingSlash: true,
  // 可选：关闭Next.js内置图片优化能力，避免静态导出报错
  images: {
    unoptimized: true,
  }
}

module.exports = nextConfig

• 第二步：调整项目代码，移除所有服务端特性的使用：
  • 不要使用getServerSideProps、服务端Action等服务端运行的API
  • 服务端组件如果用到了浏览器API或者需要交互，顶部添加'use client'声明转为客户端组件
  • 动态路由如果需要支持未预生成的路径，在动态路由页面添加generateStaticParams预导出所有路径，或者后续在托管服务配置路由重写规则
• 第三步：执行构建命令npm run build，构建完成后项目根目录会生成out文件夹，该文件夹内的所有文件就是可直接部署的静态资源

如果需要支持客户端路由跳转刷新不404，需要给静态托管服务配置路由回退规则，统一把未匹配到静态文件的请求指向index.html，常用的Nginx配置示例如下：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/out/folder;
  index index.html index.htm;

  location / {
    try_files $uri $uri.html $uri/ /index.html;
  }
}

如果是用其他静态托管平台，对应开启单页应用(SPA)路由回退配置即可。

内容的提问来源于stack exchange，提问作者elishd