Next.js重写API路由失效问题求助

1. 确认API路由文件结构合规 #

如果用Pages Router，必须存在pages/api/foo/bar.js；如果是App Router，得有app/api/foo/bar/route.js（还要确保正确导出GET/POST等请求方法）。虽然直接访问/api/foo/bar正常，但重写时可能因为路由目录结构不匹配导致找不到目标。

2. 清空缓存重启服务 #

开发环境下Next.js容易缓存旧路由规则，按以下步骤操作：

• 停掉当前服务
• 删除项目根目录下的.next文件夹
• 重新执行npm run dev或yarn dev启动服务
  生产环境要重新构建再部署。

3. 检查trailingSlash配置 #

如果next.config.js里设了trailingSlash: true，/foo/bar和/foo/bar/会被当成不同路径。可以二选一：

• 把重写规则的source改成/foo/bar/（带末尾斜杠）
• 或者将trailingSlash设为false（默认值）

4. 验证重写规则是否加载 #

在next.config.js里加日志，确认规则被正确读取：

module.exports = {
  async rewrites() {
    const rewriteRules = {
      beforeFiles: [
        {
          source: '/foo/bar',
          destination: '/api/foo/bar',
        }
      ]
    };
    console.log('已加载重写规则:', rewriteRules);
    return rewriteRules;
  }
};

启动服务后看控制台输出，确认规则存在。

5. 排查路由冲突 #

如果项目里有pages/foo/bar.js或app/foo/bar/page.js这类页面路由，虽然beforeFiles优先级更高，但如果重写后的API路由匹配异常，也可能触发404。可以先临时移除该页面路由，测试重写是否正常。

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