跳到主要内容

Next.js API路由基础

介绍​

Next.js 是一个功能强大的 React 框架，不仅支持前端开发，还提供了内置的 API 路由功能。通过 API 路由，你可以在 Next.js 应用中轻松创建后端端点，处理 HTTP 请求并返回响应。这种方式使得前后端集成更加简单，特别适合全栈开发。

本文将带你了解 Next.js API 路由的基础知识，并通过实际案例展示如何创建和使用这些路由。

什么是 API 路由？​

API 路由是 Next.js 提供的一种机制，允许你在 pages/api 目录下创建后端端点。这些端点可以直接处理 HTTP 请求（如 GET、POST 等），并返回 JSON 数据或其他响应。

与传统的后端服务不同，Next.js 的 API 路由与前端代码共享同一个项目结构，使得开发和部署更加高效。

创建第一个 API 路由​

步骤 1：创建 API 路由文件​

在 Next.js 项目中，API 路由文件需要放置在 pages/api 目录下。每个文件对应一个路由端点。

例如，创建一个名为 hello.js 的文件：

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

步骤 2：访问 API 路由​

启动 Next.js 开发服务器后，你可以通过以下 URL 访问该 API 路由：

http://localhost:3000/api/hello

你会收到以下 JSON 响应：

json
{
  "message": "Hello, world!"
}
提示

确保你的开发服务器正在运行。如果没有，可以通过运行 npm run dev 或 yarn dev 启动。

处理不同的 HTTP 方法​

API 路由可以处理多种 HTTP 方法，例如 GET、POST、PUT 和 DELETE。你可以通过 req.method 来判断请求类型。

以下是一个支持 GET 和 POST 方法的示例：

javascript
// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ name: 'John Doe' });
  } else if (req.method === 'POST') {
    const { name } = req.body;
    res.status(201).json({ message: `User ${name} created!` });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

测试 API 路由​

  • GET 请求：访问 http://localhost:3000/api/user，返回 { "name": "John Doe" }。
  • POST 请求：使用工具（如 Postman 或 cURL）发送 POST 请求，并传递 JSON 数据 { "name": "Alice" }，返回 { "message": "User Alice created!" }。

动态路由​

Next.js 支持动态 API 路由，允许你根据 URL 参数动态生成响应。动态路由的文件名需要用方括号 [] 包裹。

例如，创建一个动态路由 [id].js：

javascript
// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id });
}

访问 http://localhost:3000/api/users/123，返回 { "userId": "123" }。

实际案例：用户管理系统​

假设我们需要创建一个简单的用户管理系统，支持以下功能：

  1. 获取用户列表（GET /api/users）。
  2. 创建新用户（POST /api/users）。
  3. 获取单个用户信息（GET /api/users/[id]）。

实现代码​

javascript
// pages/api/users/index.js
let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    const { name } = req.body;
    const newUser = { id: users.length + 1, name };
    users.push(newUser);
    res.status(201).json(newUser);
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}
javascript
// pages/api/users/[id].js
let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

export default function handler(req, res) {
  const { id } = req.query;
  const user = users.find((u) => u.id === parseInt(id));

  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).json({ message: 'User not found' });
  }
}

总结​

通过本文，你已经掌握了 Next.js API 路由的基础知识，包括如何创建静态和动态路由、处理不同的 HTTP 方法，以及实现一个简单的用户管理系统。

Next.js 的 API 路由功能为全栈开发提供了极大的便利，使得前后端集成更加无缝。希望你能通过实践进一步巩固这些知识！

附加资源与练习​

  1. 官方文档：Next.js API Routes
  2. 练习：尝试扩展用户管理系统，添加更新（PUT）和删除（DELETE）用户的功能。
  3. 深入学习：探索如何在 API 路由中连接数据库（如 MongoDB 或 PostgreSQL）。

Happy coding! 🚀