為什么選擇 Next.js 開發 API？

使用 Next.js 開發 API 有以下幾個顯著優勢：

• 簡單易用：在 Next.js 中創建 API 路由非常直觀，開發者只需在 pages/api 目錄中定義端點，無需額外設置服務器。
• 高性能：通過服務器端渲染（SSR）和靜態站點生成（SSG），Next.js 提供了優化的性能，能夠顯著縮短響應時間。
• 靈活性強：Next.js 支持多種后端技術，能夠適應不同項目的需求。
• SEO 友好：Next.js 創建的 API 可以被搜索引擎輕松索引，從而提升應用的可見性。

要開始使用 Next.js 構建 API，請確保您的開發環境中已安裝 Node.js。您可以通過以下命令驗證：

node -v

如果 Node.js 已正確安裝，可以通過以下命令創建一個新的 Next.js 應用程序：

npx create-next-app my-nextjs-api

接下來，導航到項目目錄，開始構建您的 API。

創建一個簡單的 API 路由

在 Next.js 中，API 路由文件存放于 pages/api 目錄中。以下是創建一個返回用戶列表的簡單 API 路由的步驟：

1. 在 pages/api 目錄中創建一個名為 users.js 的文件。
2. 打開 users.js 文件，并添加以下代碼：

// pages/api/users.js

export default function handler(req, res) {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];
  res.status(200).json(users);
}

此代碼定義了一個 API 路由，當通過 GET 請求訪問時，將返回一個包含用戶對象的 JSON 數組。

啟動開發服務器后，您可以通過瀏覽器或 Postman 等工具訪問 http://localhost:3000/api/users 來查看 JSON 響應。

處理多種 HTTP 方法

在實際開發中，API 通常需要支持多種 HTTP 方法，例如 GET、POST、PUT 和 DELETE。以下是如何擴展 users.js 文件以支持添加新用戶的 POST 請求：

let users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
];

export default function handler(req, res) {
  const { method } = req;  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      const newUser = { id: users.length + 1, name };
      users.push(newUser);
      res.status(201).json(newUser);
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(Method ${method} Not Allowed);
  }
}

通過上述代碼，API 現在可以處理 GET 和 POST 請求。使用 Postman 或類似工具發送 POST 請求至 http://localhost:3000/api/users，并在請求正文中傳遞 JSON 數據，例如：

{
  "name": "Alice"
}

您將收到包含新用戶對象的響應。

支持查詢參數

為了增強 API 的功能，可以添加對查詢參數的支持。例如，根據用戶名稱篩選用戶列表。以下是修改后的代碼：

export default function handler(req, res) {
  const { method } = req;
  const { query } = req;

  switch (method) {
    case 'GET':
      let filteredUsers = users;
      if (query.name) {
        filteredUsers = users.filter(user =>
          user.name.toLowerCase().includes(query.name.toLowerCase())
        );
      }
      res.status(200).json(filteredUsers);
      break;
    // 繼續處理 POST 請求...
  }
}

現在，您可以通過在 URL 中傳遞查詢參數（例如 ?name=John）來篩選用戶。

添加錯誤處理

健壯的錯誤處理是構建可靠 API 的關鍵。以下代碼為 POST 請求添加了錯誤處理邏輯：

case 'POST':
  const { name } = req.body;
  if (!name) {
    return res.status(400).json({ error: 'Name is required' });
  }
  // 添加用戶邏輯...

此代碼確保當客戶端發送無效請求時，API 會返回有意義的錯誤消息。

實現簡單的身份驗證

為了提高 API 的安全性，可以實現基于令牌的身份驗證。以下是實現步驟：

1. 在項目根目錄創建 .env.local 文件，并添加一個 API 密鑰：

API_KEY=your-secret-key

2. 更新 users.js 文件，檢查傳入請求頭中的密鑰：

export default function handler(req, res) {
  const apiKey = req.headers['x-api-key'];
  if (apiKey !== process.env.API_KEY) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  // 繼續處理請求...
}

現在，所有對 API 的請求都必須在請求頭中包含正確的 API 密鑰。

總結

使用 Next.js 構建 API 是一種高效的方法，可以幫助開發者快速創建強大的后端功能，同時保持代碼庫的簡潔性。通過遵循以下最佳實踐，您可以構建更可靠、更安全的 API：

• 支持多種 HTTP 方法。
• 實現查詢參數過濾。
• 添加錯誤處理邏輯。
• 實現身份驗證機制。

通過這些技巧，您可以有效滿足應用程序的后端需求，同時提升開發效率。

原文鏈接: https://blog.stackademic.com/building-apis-with-next-js-best-practices-and-examples-e6a920703f41