Next.js动态页面生成静态页遇next export报错，next.config.js如何配置解决

问题原因定位 #

1. 报错触发逻辑：next export命令本身设计为纯静态资源导出，天生不支持API路由，只要你的项目中存在pages/api目录下的接口代码，执行该命令就会抛出对应提示。
2. exportPathMap配置错误：

• 不能使用:list、:id这类占位符写法，静态导出需要预先生成所有真实存在的HTML文件，必须提前枚举所有动态参数对应的实际路径。
• page字段的取值需要和pages目录下的文件路径完全匹配，正确写法是/category/[list]/[id]，不能用冒号格式的占位符。

解决方案 #

方案1：无需纯静态导出（推荐） #

如果你的应用部署环境支持Node.js运行，直接删除next.config.js中的exportPathMap配置，且不要使用next export命令，正常执行next build && next start即可：

• Next.js会自动对无服务端依赖的页面做静态优化，无需额外配置
• 保留动态路由、API路由的完整能力，不需要额外适配动态参数

方案2：必须使用next export做纯静态导出 #

如果需要将应用部署到不支持Node.js的纯静态托管服务，按以下步骤修改：

1. 先清理项目中pages/api目录下的所有代码，把接口逻辑迁移到前端或者第三方接口服务，否则next export会一直抛出告警。
2. 重写exportPathMap配置，枚举所有动态参数对应的真实路径，示例如下：

module.exports = { 
  images: {
    domains: ["dl8mjowvdz1rh.cloudfront.net", "app.ae"],
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  exportPathMap: async function () {
    // 这里可以替换为从后端接口请求所有动态参数的逻辑
    const paths = {
      '/': { page: '/' }, 
    }
    // 示例枚举category的所有可能路径
    const categoryParams = [
      {list: 'book', id: '1'},
      {list: 'book', id: '2'},
      {list: 'electronics', id: '3'}
    ]
    categoryParams.forEach(item => {
      paths[`/category/${item.list}/${item.id}`] = {
        page: '/category/[list]/[id]',
        query: { title: 'Category Page', ...item }
      }
    })
    // 同理枚举store的所有可能路径
    const storeParams = [
      {list: 'chain', id: '1'},
      {list: 'personal', id: '2'}
    ]
    storeParams.forEach(item => {
      paths[`/store/${item.list}/${item.id}`] = {
        page: '/store/[list]/[id]',
        query: { title: 'Store Page', ...item }
      }
    })
    return paths
  },
};

也可以选择删除exportPathMap配置，在两个动态路由页面中新增getStaticPaths方法返回所有动态参数，配置逻辑更内聚。

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