4.1 API 开发基础(极简版)

这一节的目标只有一个：
知道「API” 是什么，并在自己的 Next.js 项目里跑通一个简单接口。

可以把 API 理解成：
前端对后端说话的「菜单 + 服务员」。
你点菜(发请求)，它把菜端回来(返回数据)。

先用一句话搞懂 API

API = 应用程序之间约定好的一套「问法和答法」。

你只需要知道：

前端通过 URL 去「问」(GET /api/hello)
后端返回一段结构化的数据(一般是 JSON)
问的方式和返回的格式写进代码里，就成了一个 API

常见的 4 个动作：

动作	英文	你可以理解成
`GET`	读数据	「给我看看菜单」
`POST`	新增	「帮我下单」
`PUT`	修改	「帮我改一下订单」
`DELETE`	删除	「帮我取消订单」

在 Next.js 里写出第一个 API

假设你已经有一个跑起来的 Next.js 项目，按下面这几个步骤操作：

第 1 步：新建一个 API 文件

在项目里新建文件： app/api/hello/route.ts，内容如下：


import { NextResponse } from "next/server";
 
export async function GET() {
  return NextResponse.json({
    message: "Hello from API",
    time: new Date().toISOString(),
  });
}

第 2 步：在浏览器里访问

启动项目(npm run dev)，打开：


http://localhost:3000/api/hello

你应该能看到一段类似这样的 JSON:


{ "message": "Hello from API", "time": "2025-01-01T12:00:00.000Z" }

这就说明：你的第一个 API 已经通了。

第 3 步：让前端页面调用这个 API

在 app/page.tsx 里，可以让 AI 帮你加一段简单的前端代码，比如：


"use client";
 
import { useEffect, useState } from "react";
 
export default function Home() {
  const [message, setMessage] = useState("正在加载...");
 
  useEffect(() => {
    fetch("/api/hello")
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(() => setMessage("请求失败"));
  }, []);
 
  return <div>{message}</div>;
}

刷新首页，如果你能看到「Hello from API”，说明前端已经成功」叫菜「。

不需要深入的部分，可以先略过

这一节先刻意不追求:

完整掌握 REST 设计规范
复杂的参数校验、中间件、鉴权
各种 HTTP 状态码细节

现在你只需要做到：

看到 app/api/.../route.ts 大致知道这是一个接口
能让 AI 帮你加/改一个简单的 GET/POST
知道前端是通过 fetch("/api/xxx") 去调用它

遇到看不懂的 API 代码时，可以直接把文件丢给 AI:


请用"接口文档"的形式帮我解释这段 Next.js API 代码,
包括:
- 这个接口的 URL 是什么
- 支持哪些 HTTP 方法
- 请求体/返回体大概长什么样
- 我可以在前端用 fetch 怎么调用它

下一节: 4.2 Python 爬虫实战 – 看看数据是怎么从网页里被「抓」出来的。