Next.js 13.2 Route Handlers失效，API请求报错求助

以下是针对你遇到的接口404、URL解析失败问题的排查和修复步骤：

1. 确认路由文件的目录结构和命名 #

Next.js App Router的API路由要求严格的目录结构：

• 必须创建app/api/popular-movie目录，在该目录下创建**小写的route.ts**文件（不是Route.ts或其他命名）
• 完整路径应为：app/api/popular-movie/route.ts，缺少popular-movie文件夹或文件名错误都会导致路由不被识别

2. 检查route.ts中的导出语法 #

确保你在route.ts中导出了对应HTTP方法的异步函数，比如GET请求：

export async function GET() {
  // 示例返回逻辑
  const popularMovies = [/* 你的电影数据 */];
  return new Response(JSON.stringify(popularMovies), {
    headers: { 'Content-Type': 'application/json' },
  });
}

如果没有导出正确的方法（比如漏写export、方法名写错），Next.js不会注册这个API路由。

3. 验证开发服务器状态 #

• 确保npm run dev正在运行，修改路由文件后服务器会自动热重载，如果没生效，手动重启服务器
• 确认服务器运行在3000端口，若端口被占用，启动时会显示新端口，此时访问地址要对应新端口（比如localhost:3001/api/popular-movie）

4. 检查前端请求的URL正确性 #

• 确认请求URL拼写完全匹配：/api/popular-movie，注意是横杠连接，不要写成下划线（popular_movie）或大小写错误
• 若前端在Next.js组件中请求，直接使用绝对路径即可，示例：

async function fetchPopularMovies() {
  const res = await fetch('/api/popular-movie');
  const data = await res.json();
  // 处理数据
}

5. 排查全局路由配置 #

• 检查next.config.js中的basePath配置，如果设置了basePath: '/my-app'，接口路径会变为/my-app/api/popular-movie
• 确认没有自定义rewrites规则覆盖了/api/popular-movie路径

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