Next.js 中 API 路由的使用方法

创建 API 路由

在 Next.js 项目中，每个位于 pages/api/ 目录下的文件都会被自动解析为一个 API 路由。例如，我们创建一个简单的 hello.js 文件，它会被映射到 /api/hello。

1. 创建 API 目录

首先，在你的项目根目录中找到 pages 文件夹，然后在其中创建一个 api 目录（如果已经存在可以忽略此步骤）。

2. 编写 API 文件

在 pages/api/ 下创建一个名为 hello.js 的文件：

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

3. 访问 API 路由

启动开发服务器后，访问 http://localhost:3000/api/hello，你应该会看到以下 JSON 响应：

{
  "message": "Hello, Next.js API!"
}

API 路由参数

Next.js 的 API 路由与 Express 类似，可以通过 req 和 res 参数来处理请求和响应。

• req（请求对象）包含了客户端发送的所有请求信息，比如方法、请求体、查询参数等。
• res（响应对象）用来发送响应，可以通过 res.status() 设置响应状态码，通过 res.json() 发送 JSON 数据。

处理 GET 请求

我们可以通过 req.method 来检测请求类型，并根据不同的请求类型返回不同的响应。例如，在以下代码中，我们添加了对 GET 请求的处理：

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'This is a GET request!' });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

当你发送 GET 请求时，会返回 This is a GET request!，但对于其他请求类型（如 POST），会返回 405 错误。

处理 POST 请求

假如我们要处理表单提交的 POST 请求，可以使用 req.body 获取提交的数据。以下是一个处理 POST 请求的示例：

// pages/api/submit.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;
    if (!name || !email) {
      res.status(400).json({ error: 'Name and email are required!' });
      return;
    }
    res.status(200).json({ message: `Hello, ${name}! Your email is ${email}` });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

在这个例子中，我们从 POST 请求的 body 中提取 name 和 email 参数，如果这两个参数缺失，则返回 400 错误。如果请求数据完整，则返回成功的响应。

使用 API 路由与数据库交互

Next.js 的 API 路由还可以与数据库交互。在实际开发中，我们可以使用数据库客户端（如 mysql2）来查询或更新数据库。

以下是一个简单的例子，使用 mysql2 库连接 MySQL 数据库并返回用户数据：

import mysql from 'mysql2/promise';

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'yourpassword',
  database: 'yourdatabase'
});

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const [rows] = await pool.query('SELECT * FROM users');
      res.status(200).json(rows);
    } catch (error) {
      res.status(500).json({ error: 'Database query failed' });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}