来源：https://github.com/datawhalechina/vibe-vibe

序言

界面有了，数据库也准备好了。你点击"提交"按钮，数据应该存入数据库——但前端和数据库之间还缺一座桥。

这座桥就是 API（应用程序接口）。前端通过 HTTP 请求告诉后端用户想要什么，后端处理后返回响应。

什么是 API Route

你理解了需要后端，但具体怎么写？难道要自己搭一个 Express 服务器？老师傅说不用——Next.js 内置了 API Route 功能，创建一个文件就是一个接口，不需要额外搭建服务器。

不过在讲 API Route 之前，先理解一个更基础的概念：路由（Route）。

路由：URL 决定你看到什么

你每天都在跟路由打交道，只是没意识到。打开浏览器看看地址栏：

• 访问 movie.douban.com/ → 看到豆瓣电影首页
• 访问 movie.douban.com/subject/37311135/ → 看到《飞驰人生 3》的详情页
• 访问 movie.douban.com/subject/37311135/comments?status=P → 看到这部电影的短评（?status=P 表示"看过的人的评论"）
• 访问 movie.douban.com/chart → 看到排行榜

URL 不同，看到的页面就不同。路由就是这件事——URL 路径决定了展示什么内容。 ? 后面的部分是查询参数，用来进一步筛选或控制显示方式。

在 Next.js 里，这个对应关系直接体现在文件结构上：

app/
├── page.tsx                    → yourdomain.com/
├── subject/
│   └── [id]/
│       ├── page.tsx            → yourdomain.com/subject/37311135
│       └── comments/
│           └── page.tsx        → yourdomain.com/subject/37311135/comments
└── chart/
    └── page.tsx                → yourdomain.com/chart

文件夹结构就是 URL 结构。创建一个文件，就多了一个页面。[id] 是动态段——不管是 37311135 还是别的电影 ID，都由同一个 page.tsx 处理。这就是 Next.js 的文件系统路由——不需要写配置文件来定义"哪个 URL 对应哪个页面"，文件放在哪，URL 就是什么。

从页面路由到 API 路由

上面的路由是给用户看页面的。API Route 是同样的思路，但不是返回页面，而是返回数据。

在 app/api/ 目录下创建 route.ts 文件，就会生成一个数据接口：

• app/api/movies/route.ts → yourdomain.com/api/movies（返回电影列表的 JSON 数据）
• app/api/movies/[id]/route.ts → yourdomain.com/api/movies/123（返回某部电影的 JSON 数据）

区别只是：page.tsx 返回用户看到的页面，route.ts 返回程序用的数据。

导出处理函数

在 route.ts 文件中，你导出对应 HTTP 方法的函数。比如导出 GET 函数来处理 GET 请求，导出 POST 函数来处理 POST 请求。

Next.js 会根据请求方法自动调用对应的函数。如果同时导出了 GET 和 POST，同一个 URL 就可以同时支持获取和创建两种操作。

你的工作

整个过程中你不需要手写每个接口。你只需要告诉 AI 需求，它会生成完整的代码。你的工作是验证结果：

1. 跑起来了吗？ —— pnpm dev 启动，页面能正常操作
2. 数据库对吗？ —— 打开 Drizzle Studio，看数据是否正确写入
3. 报错了吗？ —— 把终端里的报错整段复制给 AI，让它修

不需要读懂每一行代码。知道每个文件的职责，出问题时能告诉 AI "改哪个文件"就够了。

本章小节