如何在 Next.js 中创建和使用 REST API

Next.js 以其服务器端渲染和静态站点生成的功能而闻名，但它也允许您使用服务器构建成熟的应用程序端功能，包括 API。使用 Next.js，您可以直接在框架本身内轻松创建 REST API，它可以由您的前端应用程序或任何外部服务使用。

在这篇博文中，我们将介绍如何在 Next.js 中创建简单的 REST API 以及如何在应用程序内和外部使用该 API。最后，您将深入了解如何在 Next.js 项目中构建 API 并与之交互。

在 Next.js 中创建 REST API

Next.js 提供了一种使用 pages/api 目录构建 API 路由的简单方法。您在此目录中创建的每个文件都会自动成为 API 端点，其中文件名对应于端点的路由。

第 1 步：设置新的 Next.js 项目

如果您还没有 Next.js 项目，您可以通过运行以下命令轻松创建一个：

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

这将创建一个基本的 Next.js 应用程序并启动开发服务器。您现在可以开始构建 REST API。

第 2 步：创建您的 API 路由

在 Next.js 中，API 路由是在 pages/api 文件夹中创建的。例如，如果您想创建一个简单的 API 来管理用户，您可以在 pages/api 目录中创建一个名为 users.js 的文件。

mkdir pages/api
touch pages/api/users.js

在users.js中，您可以定义API路由。这是一个使用用户列表进行响应的简单示例：

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

第 3 步：创建 MongoDB 连接实用程序
为了确保您不会为每个 API 请求打开新的数据库连接，最好创建一个可重用的 MongoDB 连接实用程序。您可以通过创建 lib/mongodb.js 文件来完成此操作，该文件处理与 MongoDB 实例的连接并重用该连接。

这是一个简单的 MongoDB 连接实用程序的示例：

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

第 4 步：在 .env.local 中设置 MongoDB URI
要安全地存储 MongoDB URI，请在项目的根目录中创建一个 .env.local 文件。在此处添加您的 MongoDB URI：

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority
</your-password></your-user>

如果您使用 MongoDB Atlas，您可以从 Atlas 仪表板获取此 URI。

第 5 步：创建与 MongoDB 交互的 API 路由

您可以通过检查 req.method 属性来处理 API 中的不同 HTTP 方法（GET、POST、PUT、DELETE）。这是 users.js 文件的更新版本，它根据 HTTP 方法做出不同的响应。

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

现在，您的 API 能够处理 GET、POST、PUT 和 DELETE 请求来管理用户。

• GET 获取所有用户。
• POST 添加新用户。
• PUT 更新现有用户。
• DELETE 删除用户。

第 6 步：测试 API

现在您已经设置了 API，您可以通过使用 Postman 或 cURL 等工具发出请求来测试它。以下是每种方法的 URL：

• 向 /api/users 发出 GET 请求以检索用户列表。
• 向 /api/users 发送 POST 请求以创建新用户（在请求正文中发送用户数据）。
• 向 /api/users 发出 PUT 请求以更新现有用户（在请求正文中发送用户数据）。
• 向 /api/users 发送 DELETE 请求以删除用户（在请求正文中发送用户 ID）。

第 5 步：保护您的 API（可选）

您可能希望向 API 添加一些基本身份验证或授权，以防止未经授权的访问。您可以通过检查 req.headers 或使用环境变量来存储 API 密钥来轻松完成此操作。例如：

mkdir pages/api
touch pages/api/users.js

在 Next.js 应用程序中使用 REST API

现在您已经设置了 API，让我们看看如何在 Next.js 应用程序中使用它。使用 API 的方法有多种，但最常见的方法是使用 fetch（或 Axios 等库）发出 HTTP 请求。

第 1 步：使用 getServerSideProps 获取数据

如果您需要从服务器端的 API 获取数据，可以使用 Next.js 的 getServerSideProps 在渲染页面之前获取数据。以下是如何在页面组件内使用 /api/users 端点的示例：

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

在此示例中，当用户访问 /users 页面时，getServerSideProps 将在渲染页面之前从 API 获取用户列表。这确保了页面加载时数据已经可用。

第 2 步：使用 useEffect 获取客户端数据

您还可以使用 React 的 useEffect 钩子来使用 API 客户端。这对于在页面加载后获取数据很有用。

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

在此示例中，API 请求是在组件安装后发出的，并且用户列表在组件的状态中更新。

步骤 3：发出 POST 请求以添加数据

要将数据发送到您的 API，您可以使用 POST 请求。以下是如何将新用户的数据发送到 /api/users 端点的示例：

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority
</your-password></your-user>

在此示例中，新用户的姓名和电子邮件作为 POST 请求发送到 API。请求成功后，会显示警报。

结论

Next.js 让直接在同一框架内构建和使用 REST API 变得异常简单。通过使用 API 路由 功能，您可以创建可以处理 CRUD 操作并将其与前端无缝集成的无服务器端点。

在这篇文章中，我们介绍了如何在 Next.js 中创建 REST API、处理不同的 HTTP 方法，以及如何在服务器端（使用 getServerSideProps）和客户端（使用 useEffect）使用该 API。这为以最少的配置构建全栈应用程序提供了多种可能性。

Next.js 继续为开发人员提供灵活而简单的解决方案，用于构建具有集成后端功能的可扩展应用程序。快乐编码！

以上是如何在 Next.js 中创建和使用 REST API的详细内容。更多信息请关注PHP中文网其他相关文章！