Next.js 13启用app目录后静态导出失败，exportPathMap异常依赖pages目录

问题原因 #

你启用了App Router（appDir: true），但导出时Next.js仍默认尝试从pages目录生成路径映射，而你的根页面（/）实际在app目录下，导致找不到对应模块。

修复步骤 #

1. 配置exportPathMap指定路由 #

在next.config.js中添加exportPathMap，明确指定App Router下的路由规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
  images: {
    unoptimized: true,
  },
  // 添加导出路径映射
  exportPathMap: async function () {
    return {
      '/': { page: '/' },
      // 其他需要导出的路由可在此添加，例如 '/about': { page: '/about' }
    };
  },
};

module.exports = nextConfig;

2. 确认App目录根页面存在 #

检查app目录下是否有page.js（或page.tsx）文件，这是App Router中根路由/的入口文件，目录结构需符合：

app/
  page.js
  // 其他页面/组件文件夹

3. 指定自定义导出目录 #

执行导出命令时，通过-o参数指定目标文件夹，例如导出到dist目录：

next build && next export -o dist

4. 额外排查项 #

• 升级Next.js到13.4+：App Router的静态导出在13.4版本后才进入稳定状态，低版本可能存在兼容问题，执行以下命令升级：

  npm install next@latest
  

• 清理缓存：删除.next和旧导出目录（如out）后，重新执行构建导出操作。

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