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

Next.js 的 API 路由功能允許開發(fā)者創(chuàng)建服務(wù)器端端點(diǎn)，用于處理表單提交、數(shù)據(jù)庫查詢或外部 API 調(diào)用等操作。這些路由位于 /pages/api 目錄中，可響應(yīng)多種 HTTP 方法，例如 GET、POST、PUT 和 DELETE。

API 路由的主要特點(diǎn)

• API 路由與前端代碼共存于同一個 Next.js 應(yīng)用中，提供了前后端無縫集成的開發(fā)體驗(yàn)。
• 支持多種 HTTP 方法，適用于各種服務(wù)器端操作。

示例：創(chuàng)建一個簡單的 API 路由

以下是一個在 Next.js 中創(chuàng)建簡單 API 路由的示例，該路由會返回一個包含消息的 JSON 響應(yīng)。

創(chuàng)建 API 路由的步驟

1. 在 Next.js 項(xiàng)目的 pages 目錄下，創(chuàng)建一個名為 api 的新文件夾（如果尚未存在）。

2. 在 api 文件夾中創(chuàng)建一個新的文件，例如 hello.js，并添加以下代碼：

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

在上述示例中，handler 函數(shù)接收兩個參數(shù)：req（請求對象）和 res（響應(yīng)對象）。它返回一個狀態(tài)碼為 200 的響應(yīng)，并包含一個 JSON 對象作為消息。

訪問 API 路由

創(chuàng)建 API 路由后，運(yùn)行 Next.js 應(yīng)用程序時，可以通過以下 URL 訪問該路由：

http://localhost:3000/api/hello

訪問該 URL 時，您將看到如下響應(yīng)：

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

處理不同的 HTTP 方法

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

示例：處理 GET 和 POST 請求

以下代碼擴(kuò)展了前面的示例，能夠分別處理 GET 和 POST 請求：

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

在此示例中：

• 對于 GET 請求，返回一條簡單的消息。
• 對于 POST 請求，回顯請求中發(fā)送的數(shù)據(jù)。
• 對于其他方法，返回狀態(tài)碼 405 和錯誤消息。

示例：使用 Fetch 調(diào)用 API

您可以從客戶端使用 Fetch API 與上述 API 路由交互。以下是一個在 Next.js 中的 React 組件中調(diào)用 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 請求將其發(fā)送到 /api/hello 路由。
• 響應(yīng)消息會顯示在頁面上。

解析請求正文

默認(rèn)情況下，Next.js 不會自動解析傳入請求的正文。以下是處理不同類型請求正文的示例：

示例：處理 JSON 請求

對于 JSON 數(shù)據(jù)，如果請求包含正確的 Content-Type 標(biāo)頭（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 編碼的表單數(shù)據(jù)

如果表單以 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(); // 將緩沖區(qū)轉(zhuǎn)換為字符串
        });
        req.on("end", () => {
            const parsedBody = parse(body); // 解析 URL 編碼的正文
            res.status(200).json({ message: 你好，${parsedBody.name}！ });
        });
    }
}

安全注意事項(xiàng)

在創(chuàng)建 API 路由時，請務(wù)必遵循以下安全最佳實(shí)踐：

• 對請求正文中的任何輸入進(jìn)行驗(yàn)證和消毒，以防止注入攻擊。
• 限制允許的 HTTP 方法，避免暴露不必要的端點(diǎn)。
• 使用 HTTPS 確保數(shù)據(jù)傳輸?shù)陌踩浴?/li>

結(jié)論

Next.js 的 API 路由功能為開發(fā)者提供了一個強(qiáng)大的工具，用于創(chuàng)建服務(wù)器端端點(diǎn)，處理表單提交、數(shù)據(jù)庫查詢或外部 API 調(diào)用等操作。通過 /pages/api 目錄中的文件，您可以輕松構(gòu)建支持多種 HTTP 方法的后端服務(wù)。結(jié)合安全最佳實(shí)踐，您可以利用 Next.js 構(gòu)建高效且安全的全棧應(yīng)用程序。

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