Next.js API 路由：GET 和 POST 请求示例

入门

为了有效地使用 Next.js API 路由，您需要掌握一些基础知识和工具。本指南将帮助您快速入门。

先决条件

在开始之前，请确保满足以下要求：

安装 Next.js
运行以下命令以全局安装 Next.js：
```
npm install -g create-next-app
```
创建新项目
使用以下命令创建一个新的 Next.js 项目：
```
npx create-next-app my-app
```
将 my-app 替换为您的项目名称。
启动开发服务器
导航到项目目录并启动开发服务器：
```
cd my-app
npm run dev
```
您的 Next.js 应用程序将运行在 http://localhost:3000。

完成以上步骤后，您就可以开始探索 Next.js API 路由，并为您的 Web 应用程序构建服务器端功能。

在 Next.js 中创建 API 路由

Next.js 提供了一种简单的方式来创建 API 路由。您只需在 pages/api 目录中定义路由，每个文件对应一个特定的 API 端点。

设置 API 路由

以下是创建基本 API 路由的步骤：

导航到 pages/api 目录
在您的 Next.js 项目中找到 pages/api 目录。如果不存在，请创建一个。
创建新文件
在 pages/api 目录中创建一个新文件，例如 users.js，用于处理用户数据。
定义路由处理程序
在文件中导出一个默认函数，该函数接受两个参数：req（请求对象）和 res（响应对象）。以下是一个示例：
```
export default function handler(req, res) {
   res.status(200).json({ message: 'Hello from the API!' });
}
```
该示例返回一个状态码为 200 的 JSON 响应。

访问 API 路由

定义路由后，您可以通过以下 URL 访问它：

http://localhost:3000/api/[filename]

例如，对于 users.js 文件，API 路由为：

http://localhost:3000/api/users

通过这种方式，您可以轻松处理不同的 HTTP 方法（如 GET、POST、PUT、DELETE）并管理 API 路由中的数据。

处理 GET 请求

GET 请求通常用于从服务器获取数据。在 Next.js 中，您可以通过检查 req.method 属性来处理 GET 请求。

编写 GET 请求处理程序

以下是一个示例代码：

export default function handler(req, res) {
    if (req.method === 'GET') {
        res.status(200).json({ message: '这是一个 GET 请求' });
    } else {
        res.setHeader('Allow', ['GET']);
        res.status(405).end(Method ${req.method} Not Allowed);
    }
}

在此示例中，处理程序会检查请求方法是否为 GET。如果不是，则返回 405 状态码，并指明只允许 GET 请求。

使用查询参数

Next.js 会自动解析 URL 中的查询参数，并通过 req.query 提供这些参数。以下是一个示例：

export default function handler(req, res) {
    if (req.method === 'GET') {
        const { id } = req.query;
        res.status(200).json({ id, message: 正在获取 ID: ${id} 的数据 });
    } else {
        res.setHeader('Allow', ['GET']);
        res.status(405).end(Method ${req.method} Not Allowed);
    }
}

访问以下 URL 时：

http://localhost:3000/api/users?id=123

响应为：

{
    "id": "123",
    "message": "正在获取 ID: 123 的数据"
}

处理 POST 请求

POST 请求通常用于向服务器发送数据。在 Next.js 中，您可以通过解析请求体来处理 POST 请求。

编写 POST 请求处理程序

以下是一个示例代码：

export default async function handler(req, res) {
    if (req.method === 'POST') {
        const data = await req.json();
        console.log(data);
        res.status(200).json(data);
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(Method ${req.method} Not Allowed);
    }
}

在此示例中，req.json() 用于解析请求体中的 JSON 数据。

处理表单数据

以下是一个处理表单数据的示例：

export default function handler(req, res) {
    if (req.method === 'POST') {
        const { title, content } = JSON.parse(req.body);
        // 将数据保存到数据库
        res.status(200).json({ message: '数据已成功保存' });
    } else {
        res.setHeader('Allow', ['POST']);
        res.status(405).end(Method ${req.method} Not Allowed);
    }
}

在处理表单数据时，请务必验证和清理用户输入，以防止安全漏洞。

动态 API 路由

动态 API 路由允许您创建灵活的端点。例如，您可以通过文件名中的方括号（[]）定义动态参数。

示例

创建一个动态路由文件 pages/api/users/[id].js，以下是代码示例：

export default function handler(req, res) {
    const { id } = req.query;
    res.status(200).json({ id, message: 获取用户 ID: ${id} 的数据 });
}

访问以下 URL 时：

http://localhost:3000/api/users/123

响应为：

{
    "id": "123",
    "message": "获取用户 ID: 123 的数据"
}

动态 API 路由使您的端点更加灵活，能够处理多种请求场景。

使用中间件

中间件允许您在调用路由处理程序之前执行代码，例如记录请求、验证用户或修改响应。

示例：记录请求

export function loggingMiddleware(req, res, next) {
    console.log([${new Date().toISOString()}] ${req.method} ${req.url});
    next();
}

示例：身份验证

import jwt from 'jsonwebtoken';

export function authenticateToken(req, res, next) {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];

    if (!token) return res.status(401).json({ message: '未授权' });

    jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
        if (err) return res.status(403).json({ message: '禁止访问' });
        req.user = user;
        next();
    });
}

通过中间件，您可以增强 API 路由的功能和安全性。

错误处理

在构建可靠的 API 时，错误处理至关重要。以下是一些最佳实践：

使用 Try-Catch 块

export default async function handler(req, res) {
    try {
        // API 逻辑
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: '内部服务器错误' });
    }
}

提供清晰的错误消息

{
    "error": "无效的请求负载",
    "message": "请求数据格式错误，请检查后重试。",
    "requestMethod": "POST",
    "requestUrl": "/api/users"
}

清晰的错误消息有助于调试和改善用户体验。

提高性能

以下是一些优化 API 路由性能的技巧：

数据库优化
- 对数据库列进行索引。
- 使用高效的查询技术。
- 缓存频繁访问的数据。

缓存 API 路由
使用缓存头提高响应速度。例如：

{
   "routes": [
       {
           "src": "/api/(.*)",
           "headers": { "cache-control": "s-maxage=3600" },
           "dest": "/api/$1"
       }
   ]
}

通过这些优化，您可以显著提高 API 的性能和用户体验。

总结

本文介绍了 Next.js API 路由的基础知识，包括如何处理 GET 和 POST 请求、动态路由、中间件、错误处理以及性能优化。通过掌握这些技巧，您可以构建高效、安全且可扩展的 API。

编码愉快！🚀

原文链接: https://nextjsstarter.com/blog/nextjs-api-routes-get-and-post-request-examples/