Next.js API 路由

Next.js 是一个功能强大的 React 框架，不仅支持客户端渲染（CSR）和服务器端渲染（SSR），还提供了内置的 API 路由功能。通过 API 路由，你可以在 Next.js 应用中轻松创建后端端点，处理 HTTP 请求并返回数据。本文将详细介绍 Next.js API 路由的概念、用法以及实际应用场景。

什么是 API 路由？

API 路由是 Next.js 提供的一种机制，允许你在 pages/api 目录下创建文件，这些文件会自动成为后端端点。每个文件对应一个路由，你可以通过这些路由处理 HTTP 请求（如 GET、POST、PUT、DELETE 等），并返回 JSON 数据或其他响应。

API 路由的主要优势在于：

无缝集成：与 Next.js 应用的其他部分（如页面和组件）无缝集成。
无需额外配置：无需单独设置后端服务器，所有代码都在同一个项目中。
支持 SSR 和 CSR：可以与服务器端渲染和客户端渲染结合使用。

创建你的第一个 API 路由

让我们从一个简单的例子开始。假设我们想创建一个返回当前时间的 API 端点。

在 pages/api 目录下创建一个新文件，例如 time.js。
在该文件中编写以下代码：

javascript
export default function handler(req, res) {
  const currentTime = new Date().toLocaleTimeString();
  res.status(200).json({ time: currentTime });
}

启动 Next.js 开发服务器（如果尚未启动）：

bash
npm run dev

访问 http://localhost:3000/api/time，你将看到类似以下的 JSON 响应：

json
{
  "time": "14:35:22"
}

备注

req 是请求对象，包含客户端发送的请求信息。
res 是响应对象，用于向客户端发送响应。

处理不同的 HTTP 方法

API 路由支持多种 HTTP 方法（如 GET、POST、PUT、DELETE 等）。你可以根据请求方法执行不同的操作。

以下是一个处理 GET 和 POST 请求的示例：

javascript
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'This is a GET request' });
  } else if (req.method === 'POST') {
    const { name } = req.body;
    res.status(200).json({ message: `Hello, ${name}!` });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

提示

使用 req.method 检查请求方法。
对于 POST 请求，可以通过 req.body 访问请求体中的数据。

动态 API 路由

Next.js 支持动态 API 路由，类似于动态页面路由。你可以在文件名中使用方括号 [] 来定义动态路由。

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

javascript
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id });
}

访问 http://localhost:3000/api/user/123，你将看到以下响应：

json
{
  "userId": "123"
}

警告

动态路由参数通过 req.query 访问。
确保处理未定义或无效的参数，以避免错误。

实际应用场景

场景 1：用户身份验证

你可以使用 API 路由处理用户登录请求，验证用户凭据并返回 JWT 令牌。

javascript
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    // 模拟验证逻辑
    if (email === '[email protected]' && password === 'password') {
      res.status(200).json({ token: 'fake-jwt-token' });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

场景 2：数据获取

你可以使用 API 路由从数据库或其他 API 获取数据，并将其返回给客户端。

javascript
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      res.status(200).json(response.data);
    } catch (error) {
      res.status(500).json({ message: 'Error fetching data' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

总结

Next.js API 路由为开发者提供了一种简单而强大的方式来创建后端端点。通过本文，你已经学会了如何创建基本的 API 路由、处理不同的 HTTP 方法、使用动态路由以及在实际应用中使用 API 路由。

注意

确保在生产环境中正确处理错误和异常。
避免在 API 路由中暴露敏感信息。

附加资源与练习

资源

练习

创建一个 API 路由，返回当前日期。
实现一个动态路由，根据用户 ID 返回用户信息。
尝试将 API 路由与数据库（如 MongoDB 或 PostgreSQL）集成。

通过实践这些练习，你将更深入地理解 Next.js API 路由的强大功能！

什么是 API 路由？​

创建你的第一个 API 路由​

处理不同的 HTTP 方法​

动态 API 路由​

实际应用场景​

场景 1：用户身份验证​

场景 2：数据获取​

总结​

附加资源与练习​

资源​

练习​