亚洲va乱码一区二区三区,国产亚洲一区二区在线观看,日韩精品你懂的在线播放

二. 為什么需要 API 路由？

現代 Web 應用通常需要通過 API 與外部數據源進行交互。API（應用程序編程接口）定義了應用或服務如何通過 HTTP 請求和響應進行通信，例如：客戶端獲取用戶列表或提交表單數據。

目前最流行的 API 構建方法是 REST（表征狀態轉移）。RESTful API 允許客戶端通過不同 HTTP 方法（如 GET、POST、PUT、DELETE）與服務器交互。除了 REST，還有 SOAP 和 GraphQL 等方法。

在傳統全棧開發中，前端和后端通常分開構建，而 Next.js API 路由 使開發者能夠在同一個項目中處理前端和后端邏輯，簡化項目結構并減少維護成本。

三. 如何創建 API 路由？

在 Next.js 中，創建 API 路由與創建頁面路由類似。不同之處在于 API 路由必須放置在 pages/api 目錄下，每個文件即一個 API 端點。例如：

文件路徑：pages/api/example.js
訪問路徑：/api/example

1. 示例：創建一個簡單 API 路由

項目初始化后，pages/api 目錄下默認包含一個示例文件 hello.js：

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

訪問 http://localhost:3000/api/hello 或發送 GET 請求，將返回：

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

2. 請求和響應對象

每個 API 路由都需要導出一個默認函數處理請求，該函數接收兩個參數：

req：請求對象，包含 req.body、req.query 等
res：響應對象，用于返回數據，例如 res.status()、res.json()

如果熟悉 Node.js 或 Express.js，這些方法非常類似。

四. 處理不同的 HTTP 方法

默認情況下，API 路由會對所有 HTTP 方法返回相同響應。可以通過 switch 或 if/else 根據方法處理不同請求：

export default function handler(req, res) {
  switch (req.method) {
    case 'GET':
      res.status(200).json({ message: 'This is a GET request' });
      break;
    case 'POST':
      res.status(201).json({ message: 'This is a POST request' });
      break;
    default:
      res.status(405).json({ error: 'Method not allowed' });
  }
}

五. 動態 API 路由

Next.js 支持動態 API 路由，工作方式與動態頁面路由類似。例如：

在 pages/api/trivia/[number].js 中創建動態路由：

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

  if (isNaN(number)) {
    res.status(400).json({ error: 'Invalid number' });
  } else {
    res.status(200).json({ trivia: Random trivia for number ${number} });
  }
}

訪問 http://localhost:3000/api/trivia/42 返回：

{
  "trivia": "Random trivia for number 42"
}

六. 使用中間件增強 API 路由

中間件是處理請求的預處理函數，可用于身份驗證、日志記錄或請求驗證。在 Next.js 中，可使用 next-connect 實現中間件功能。

1. 示例：身份驗證中間件

import nextConnect from 'next-connect';

const authenticate = (req, res, next) => {
  const token = req.headers.authorization;

  if (token === 'valid-token') {
    next();
  } else {
    res.status(401).json({ error: 'Unauthorized' });
  }
};

const handler = nextConnect()
  .use(authenticate)
  .get((req, res) => {
    res.status(200).json({ message: 'Authenticated GET request' });
  });

export default handler;

七. 使用 TypeScript 提升類型安全

Next.js 支持 TypeScript，確保 API 路由類型安全：

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: 'TypeScript is awesome!' });
}

八. 測試 API 路由

測試確保 API 路由可靠性，可通過單元測試和集成測試實現。

1. 單元測試

使用 Jest 和 node-mocks-http 模擬請求和響應對象：

import { createMocks } from 'node-mocks-http';
import handler from '../pages/api/hello';

test('returns correct response', async () => {
  const { req, res } = createMocks({ method: 'GET' });
  await handler(req, res);

  expect(res._getStatusCode()).toBe(200);
  expect(res._getJSONData()).toEqual({ message: 'Hello, World!' });
});

2. 集成測試

集成測試確保 API 路由與數據庫或其他服務協同工作：

jest.mock('../lib/db', () => ({
  getUser: jest.fn(),
}));

test('returns user data', async () => {
  getUser.mockResolvedValueOnce({ id: 1, name: 'John Doe' });

  const { req, res } = createMocks({ method: 'GET' });
  await handler(req, res);

  expect(res._getStatusCode()).toBe(200);
  expect(res._getJSONData()).toEqual({ id: 1, name: 'John Doe' });
});