Next.js 14 App路由下API Route返回404问题求助

路径匹配核心检查 #

• 修正SWR请求路径：你的API文件路径是src/app/api/dash/route.ts，对应的请求路径应为/api/dash，不要在请求URL里添加/route后缀。正确调用示例：

  const { data, error } = useSWR('/api/dash', fetcher)
  

• 确认src目录配置：如果项目以src为根目录，Next.js默认会识别src/app作为App Router的根目录，无需额外配置；若有自定义next.config.js，检查appDir参数是否指向正确路径。

API路由文件规范验证 #

• 确保导出正确的HTTP方法函数：比如处理GET请求必须导出GET函数，示例代码：

  // src/app/api/dash/route.ts
  export async function GET(request: Request) {
    // Google Analytics数据请求逻辑
    return new Response(JSON.stringify({ data: 'ga-response-data' }), {
      headers: { 'Content-Type': 'application/json' }
    })
  }
  

• 严格遵循文件名规则：必须命名为route.ts（或route.js），大小写和拼写不能出错，Next.js对API路由文件名严格敏感。

开发环境缓存与服务重启 #

• 重启Next.js开发服务器：修改路由文件后缓存未更新可能导致路由未注册，执行npm run dev重启服务。
• 强制刷新浏览器：用Ctrl+Shift+R清除页面缓存，避免旧请求缓存引发404。

额外排查点 #

• 检查自定义中间件：如果项目中有middleware.ts，确认它没有拦截/api/dash路径的请求。
• 查看终端日志：API路由文件若存在语法错误，Next.js不会注册该路由，检查开发服务器终端是否有编译报错信息。

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