在 Next.js 13 和后来的版本中,应用目录结构发生了一些变化。你可以在 app 目录中创建 API 路由。下面是如何在 Next.js 14 中创建一个简单的 API,响应一个 GET 请求并返回 “hello” 字符串的步骤:
创建 API 路由
1、在 app 目录中创建 API 路由
在项目中,导航到 app 目录,并创建一个 api 文件夹,然后在 api 文件夹中添加 hello 文件。目录结构应如下所示:
my-nextjs-app/
├── app/
│ ├── api/
│ │ └── hello/
│ │ └── route.ts
│ └── page.ts
├── …
2、编写 API 路由代码
在 app/api/hello/route.ts 文件中添加以下内容:
export async function GET(request) { return new Response("hello", {status: 200,});
}
3、访问 API
可以通过在浏览器中访问以下 URL 来测试 API:
http://localhost:3000/api/hello
如果一切正常,应看到 ‘hello’ 字符串作为响应。
4、关于Post请求
import type { NextApiRequest, NextApiResponse } from 'next';// 处理 POST 请求
export async function POST(req: NextApiRequest, res: NextApiResponse) {// 返回一个 JSON 响应 return new Response(JSON.stringify({ 'message': "文件上传成功" }), {status: 200,});
}