Next.js 14是否支持API Routes？创建API接口遇问题求助

Next.js 14完全支持API Routes功能，但需根据你使用的路由架构选择对应的实现方式，两种架构的API路由写法差异很大，这也是你按旧方式编写后无法运行的核心原因：

1. 区分路由架构 #

• Pages Router（旧架构）：项目根目录存在pages文件夹，API路由需放在pages/api目录下，每个.js/.ts文件对应一个API接口。
  示例代码：

  // pages/api/hello.js
  export default function handler(req, res) {
    res.status(200).json({ message: 'Hello from API!' })
  }
  

  访问路径：/api/hello

• App Router（Next.js 13+默认架构）：项目根目录存在app文件夹，旧的pages/api写法不生效，需按新规范创建路由：

  1. 在app目录下创建api/hello子文件夹
  2. 创建route.js（或route.ts）文件，通过导出HTTP方法函数定义接口
     示例代码：

  // app/api/hello/route.js
  export async function GET() {
    return Response.json({ message: 'Hello from API!' })
  }
  

  访问路径同样是/api/hello

2. 问题排查步骤 #

1. 确认项目架构：检查根目录是app还是pages文件夹，匹配对应的API写法
2. 若使用App Router：将原pages/api下的代码迁移到app/api/[接口名]/route.js，并替换为新的HTTP方法导出格式
3. 重启开发服务器：修改路由结构后需重启npm run dev才能生效

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