在 Next.js 中使用无服务器函数构建 API

Next.js 是一个用于创建预渲染 React 网站的 React 框架。这一切都是通过服务器端渲染或静态站点生成来完成的。

在服务器端渲染或 SSR 中，Next.js 在页面请求来自浏览器后，将 React 组件渲染到服务器上的 HTML 页面中。在静态站点生成或 SSG 中，Next.js 在构建时将 React 组件呈现为 HTML 页面。我们只需将网页和 JavaScript 包部署到服务器。

无论您是在 Next.js 中使用 SSR 还是 SSG，您的 React 组件在到达浏览器时已经呈现为 HTML 页面。因此，所有路由都在浏览器中处理，并且应用程序的行为类似于单页应用程序 (SPA)。与此相反，React 通过客户端渲染在浏览器中渲染组件。

使用 Next.js，我们可以获得 SSG 和 SSR 的好处，例如提高性能和更好的 SEO。

在本文中，我们将了解 Next.js 的另一个重要特性——无服务器函数。我们将学习如何在专为 Next 应用程序设计的平台 Vercel 上运行无服务器函数。我们将从讨论 Next.js 页面路由和动态路由开始，然后在我们的知识基础上学习 Next.js API 和动态 API 路由。

• Next.js 中的无服务器函数介绍

• 先决条件

• 设置我们的应用程序

• Next.js 中的页面路由

• Next.js 中的动态路由

• 使用 Next.js 无服务器函数的 API 路由

  • 请求处理函数

• 动态 API 路由

• API 路由的优点

Next.js 中的无服务器函数介绍

术语“无服务器函数”只是一个命名约定。AWS 称它们为 Lambda 函数，但 Vercel 称它们为无服务器函数——它们是同一回事。

无服务器函数不是 Next.js API 的直接组成部分。但是，Next.js 为开发人员提供了可以部署为 Vercel 无服务器函数的 API 路由。这就是本文的症结所在。

先决条件

要从本文中获得最大收益，需要满足以下先决条件：

• 对 JavaScript 的基本了解

• Next.js的基本理解

• API设计的基本理解

• 系统上安装的最新 Node.js 版本

设置我们的应用程序

我们将从引导 Next.js 应用程序开始，并使用它create-next-app来自动设置所有内容。要创建 Next.js 项目，请运行以下命令：

纱线创建下一个应用程序

安装完成后，运行yarn dev. 当您访问时localhost:3000，您将获得：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

Next.js 中的页面路由

在说 API 路由之前，我们先来了解一下页面路由。

在 Next.js 中，每个页面都由一个组件驱动。例如，“关于”页面将有一个About组件，而“联系”页面将有一个C