Next.js 如何使用 TypeScript 编写 API 路由？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 创建 API 路由

在 Next.js 中，API 路由位于 pages/api 目录下。每个文件都会被视为一个 API 端点。例如，pages/api/hello.ts 文件将对应 /api/hello 端点。

2. 使用 TypeScript 类型

Next.js 提供了 NextApiRequest 和 NextApiResponse 类型，用于定义 API 请求和响应的类型。这些类型可以帮助你在编写 API 路由时获得更好的类型安全性和代码提示。

NextApiRequest：表示 API 请求对象，包含请求方法、查询参数、请求体等信息。
NextApiResponse：表示 API 响应对象，用于设置响应状态码、响应头、响应体等。

3. 定义响应数据类型

你可以通过泛型参数为 NextApiResponse 指定响应数据的类型。例如：

// www.javascriptcn.com code example
type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' });
}

在这个例子中，Data 类型定义了响应数据的结构，NextApiResponse<Data> 表示响应对象将返回一个符合 Data 类型的 JSON 数据。

4. 处理不同的 HTTP 方法

你可以根据请求的 HTTP 方法（如 GET、POST 等）来处理不同的逻辑。例如：

// www.javascriptcn.com code example
import { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if (req.method === 'GET') {
    res.status(200).json({ name: 'John Doe' });
  } else if (req.method === 'POST') {
    // 处理 POST 请求
    res.status(200).json({ name: 'Jane Doe' });
  } else {
    res.status(405).end(); // 方法不允许
  }
}

在这个例子中，我们根据 req.method 的值来处理不同的 HTTP 方法。

5. 处理请求体和查询参数

你可以通过 req.body 和 req.query 来访问请求体和查询参数。例如：

// www.javascriptcn.com code example
import { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  message: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const { name } = req.query;

  if (req.method === 'POST') {
    const { message } = req.body;
    res.status(200).json({ message: `Hello, ${name}! You said: ${message}` });
  } else {
    res.status(200).json({ message: `Hello, ${name}!` });
  }
}

在这个例子中，我们通过 req.query 获取查询参数，并通过 req.body 获取请求体中的数据。

6. 错误处理

你可以在 API 路由中进行错误处理，并返回适当的 HTTP 状态码和错误信息。例如：

// www.javascriptcn.com code example
import { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  error?: string;
  message?: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if (req.method !== 'GET') {
    res.status(405).json({ error: 'Method Not Allowed' });
    return;
  }

  try {
    // 处理逻辑
    res.status(200).json({ message: 'Success' });
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

在这个例子中，我们检查请求方法是否为 GET，如果不是则返回 405 Method Not Allowed 错误。在处理逻辑时，如果发生错误，则返回 500 Internal Server Error。

通过以上步骤，你可以在 Next.js 中使用 TypeScript 编写功能强大且类型安全的 API 路由。

Next.js 如何使用 TypeScript 编写 API 路由？

推荐答案