Next.js中exportPathMap配置动态路由失效问题求助

一、正确配置 exportPathMap 生成动态路由 #

先检查你的next.config.js，确保exportPathMap函数正确生成动态路由条目。假设你的动态页面文件是pages/editor/[id].js，配置示例如下：

module.exports = {
  exportPathMap: async function () {
    // 替换成你的实际id数据源，比如从API拉取、本地JSON读取
    const editorIds = ['article-1', 'note-2', 'draft-3'];

    // 初始化静态路由映射
    const paths = {
      '/': { page: '/' },
      // 其他静态路由比如/about也可以加在这里
      '/about': { page: '/about' }
    };

    // 遍历id生成对应的动态路由
    editorIds.forEach(id => {
      paths[`/editor/${id}`] = {
        page: '/editor/[id]',
        query: { id }
      };
    });

    return paths;
  }
};

核心要点：

• 动态页面必须放在pages/editor目录下，文件名严格为[id].js（或.tsx）
• exportPathMap必须为每个需要预渲染的id生成路径条目，否则静态导出时不会生成对应页面，访问时就会被重定向到主页

二、PAGE_ROUTES 常量文件的作用与示例 #

你看到的import { PAGE_ROUTES } from '../constants/config';是项目自定义的路由管理文件，用来统一存放所有路由路径，避免硬编码。示例内容如下：

// constants/config.js
export const PAGE_ROUTES = {
  HOME: '/',
  EDITOR: '/editor/[id]',
  ABOUT: '/about'
};

用这个常量的好处是，在配置或组件里跳转路由时直接调用常量，减少拼写错误。比如上面的exportPathMap可以改成：

import { PAGE_ROUTES } from '../constants/config';

module.exports = {
  exportPathMap: async function () {
    const editorIds = ['article-1', 'note-2', 'draft-3'];
    const paths = {
      [PAGE_ROUTES.HOME]: { page: PAGE_ROUTES.HOME },
      [PAGE_ROUTES.ABOUT]: { page: PAGE_ROUTES.ABOUT }
    };

    editorIds.forEach(id => {
      paths[`/editor/${id}`] = {
        page: PAGE_ROUTES.EDITOR,
        query: { id }
      };
    });

    return paths;
  }
};

三、额外排查点 #

1. 静态导出验证：运行next build && next export后，检查生成的out目录，应该有editor/article-1、editor/note-2这类文件夹，每个文件夹里要有index.html文件
2. 开发环境测试：开发环境（next dev）下动态路由无需配置exportPathMap即可直接访问，如果此时访问/editor/xxx仍重定向，检查页面文件名是否正确、有没有路由冲突
3. 页面组件接收参数：确保pages/editor/[id].js正确获取id参数：

import { useRouter } from 'next/router';

export default function Editor() {
  const router = useRouter();
  const { id } = router.query;

  return <div>当前编辑ID：{id}</div>;
}

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