Next.js API 路由全面指南 - LearnCodePro

了解 Next.js API 路由的综合指南

Next.js 是一个功能强大的 React 框架，能够让开发者轻松构建服务器渲染和静态生成的 Web 应用程序。其一大核心功能是支持创建 API 路由，使得开发者可以在 Next.js 应用中构建完整的后端服务。本指南将深入探讨如何在 Next.js 中创建和使用 API 路由，并通过实际示例帮助您全面掌握相关技术。

什么是 Next.js 中的 API 路由？

Next.js 的 API 路由功能允许开发者创建服务器端端点，用于处理表单提交、数据库查询或外部 API 调用等操作。这些路由位于 /pages/api 目录中，可响应多种 HTTP 方法，例如 GET、POST、PUT 和 DELETE。

API 路由的主要特点

API 路由与前端代码共存于同一个 Next.js 应用中，提供了前后端无缝集成的开发体验。
支持多种 HTTP 方法，适用于各种服务器端操作。

示例：创建一个简单的 API 路由

以下是一个在 Next.js 中创建简单 API 路由的示例，该路由会返回一个包含消息的 JSON 响应。

创建 API 路由的步骤

在 Next.js 项目的 pages 目录下，创建一个名为 api 的新文件夹（如果尚未存在）。

在 api 文件夹中创建一个新的文件，例如 hello.js，并添加以下代码：

export default function handler(req, res) {
   res.status(200).json({ message: "Hello, World!" });
}

在上述示例中，handler 函数接收两个参数：req（请求对象）和 res（响应对象）。它返回一个状态码为 200 的响应，并包含一个 JSON 对象作为消息。

访问 API 路由

创建 API 路由后，运行 Next.js 应用程序时，可以通过以下 URL 访问该路由：

http://localhost:3000/api/hello

访问该 URL 时，您将看到如下响应：

{
    "message": "Hello, World!"
}

处理不同的 HTTP 方法

在 Next.js 的 API 路由中，可以在一个路由中处理多种 HTTP 方法，例如 GET、POST、PUT 和 DELETE。以下是一个示例，展示如何处理 GET 和 POST 请求。

示例：处理 GET 和 POST 请求

以下代码扩展了前面的示例，能够分别处理 GET 和 POST 请求：

export default function handler(req, res) {
    if (req.method === "GET") {
        res.status(200).json({ message: "您发送了一个 GET 请求" });
    } else if (req.method === "POST") {
        const { name } = req.body;
        res.status(200).json({ message: 你好，${name}！ });
    } else {
        res.status(405).json({ message: "方法不允许" });
    }
}

在此示例中：

对于 GET 请求，返回一条简单的消息。
对于 POST 请求，回显请求中发送的数据。
对于其他方法，返回状态码 405 和错误消息。

示例：使用 Fetch 调用 API

您可以从客户端使用 Fetch API 与上述 API 路由交互。以下是一个在 Next.js 中的 React 组件中调用 API 的示例：

import { useState } from "react";

export default function MyComponent() {
    const [name, setName] = useState("");
    const [responseMessage, setResponseMessage] = useState("");

    const handleSubmit = async () => {
        const res = await fetch("/api/hello", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name }),
        });
        const data = await res.json();
        setResponseMessage(data.message);
    };

    return (
        
             setName(e.target.value)}
                placeholder="输入您的姓名"
            />
            
            {responseMessage}
        
    );
}

在此组件中：

用户可以输入姓名，并通过 POST 请求将其发送到 /api/hello 路由。
响应消息会显示在页面上。

解析请求正文

默认情况下，Next.js 不会自动解析传入请求的正文。以下是处理不同类型请求正文的示例：

示例：处理 JSON 请求

对于 JSON 数据，如果请求包含正确的 Content-Type 标头（application/json），则可以直接使用 req.body：

export default function handler(req, res) {
    if (req.method === "POST") {
        const { name } = req.body; // 自动解析 JSON
        res.status(200).json({ message: 你好，${name}！ });
    }
}

示例：处理 URL 编码的表单数据

如果表单以 application/x-www-form-urlencoded 提交，则需要手动解析请求正文。以下是一个示例：

import { parse } from "querystring";

export default function handler(req, res) {
    if (req.method === "POST") {
        let body = "";
        req.on("data", (chunk) => {
            body += chunk.toString(); // 将缓冲区转换为字符串
        });
        req.on("end", () => {
            const parsedBody = parse(body); // 解析 URL 编码的正文
            res.status(200).json({ message: 你好，${parsedBody.name}！ });
        });
    }
}

安全注意事项

在创建 API 路由时，请务必遵循以下安全最佳实践：

对请求正文中的任何输入进行验证和消毒，以防止注入攻击。
限制允许的 HTTP 方法，避免暴露不必要的端点。
使用 HTTPS 确保数据传输的安全性。

结论

Next.js 的 API 路由功能为开发者提供了一个强大的工具，用于创建服务器端端点，处理表单提交、数据库查询或外部 API 调用等操作。通过 /pages/api 目录中的文件，您可以轻松构建支持多种 HTTP 方法的后端服务。结合安全最佳实践，您可以利用 Next.js 构建高效且安全的全栈应用程序。

原文链接: https://www.learncodepro.com/blog/next.js-api-routes-a-comprehensive-guide