当前位置：首页 > news >正文

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

news 来源：原创 2024/5/19 6:45:38

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组件，而“联系”页面将有一个Contact组件。每个页面组件在文件pages夹中都有一个文件，因此，每个页面组件的文件名和位置都与特定页面的路径相关联。

要详细说明这一点，请浏览您的浏览器localhost:3000/about，您将获得：

上面显示的404页面只是意味着 Next.js 在page名为about. 这是因为我们还没有在文件夹中创建about组件。pages

要解决此问题，请在目录中创建一个about.js文件pages并添加以下代码：

常量关于 = () => {
    返回 （
        <div>
            <h1>世界你好！</h1>
        </div>
    )
};
导出默认关于；

现在，重新访问localhost:3000/about，您会得到：

当我们在文件夹中创建About组件时pages，Next.js 会自动创建一个路由来服务该About组件。因此，路由名称与文件名相关联。

Next.js 中的动态路由

Next.js 页面支持动态路由。这很有用，因为复杂的应用程序需要的不仅仅是使用预定义的路径来定义路由。

在 Next.js 中，您可以将括号添加到页面组件名称中，[param].js例如，以创建动态路由。该页面可以通过其动态路由访问：pages/users/[param].js. 这里，[param]是页面的 id、slug、漂亮的 URL 等。任何类似/users/1或的路由/users/abcdef都可以匹配。

Next.js 会将匹配的路径参数作为查询参数发送到页面。如果还有其他查询参数，Next.js 会将匹配的路径参数与它们链接起来。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM

/users/abcdef为了详细说明这一点，动态路由的匹配路由pages/users/[param].js将具有查询对象：

{“参数”：“abcdef”}

/users/abcdef?foo=bar同样，动态路由的匹配路由pages/users/[param].js, 将具有以下query对象：

{“foo”：“bar”，“pid”：“abc”}

在您的应用程序中，创建一个user文件夹，并在其中创建一个名为[username.js. 将以下代码添加到组件中：

从“下一个/路由器”导入 { useRouter }；
常量用户 = () => {
    常量路由器 = useRouter();
    常量用户名 = router.query["username"];
    返回 （
        <div>
            <h1>你好！欢迎{用户名} </h1>
        </div>
    );
};
导出默认用户；

现在，当您访问时http://localhost:3000/users/lawrenceagles，您会得到：

从我们上面的演示中，您可以看到 Next 自动/users/lawrenceagles与动态路由匹配pages/users/[username].js。因此，username路由中传递的任何内容都将显示在页面上。您可以尝试不同的用户名。

除了使用页面路由创建和提供页面之外，Next.js 还可以使用 API 路由创建 API。以我们目前的知识为基础，让我们在下一节中了解 Next.js API 路由。

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

API 路由是在 Next.js v9 中引入的。它们使我们能够构建后端应用程序端点，在此过程中利用热重载和统一的构建管道。

这意味着 Next ≥v9 封装了前端和后端。我们可以快速开发可轻松扩展的全栈 React 和 Node.js 应用程序。

虽然页面路由将 Next.js 页面作为网页提供，但 Next.js API 路由被视为端点。API 路由位于/pages/api文件夹内，Next.js 将该文件夹内的任何文件映射到/api/*作为端点。

这个特性非常有趣，因为它使 Next.js 能够在前端呈现存储在 Next.js 应用程序中的数据，或者呈现使用 Next.js API 路由获取的数据。

通过使用引导您的应用程序create-next-app，Next.js 会自动为您创建一个示例 API 路由，即/pages/api/hello.js文件。在内部/pages/api/hello.js，Next.js 创建并导出了一个名为handler返回 JSON 对象的函数。

您可以通过浏览器导航访问此端点，http://localhost:3000/api/hello并返回以下 JSON：

{
  “名称”：“约翰·多伊”
}

请求处理函数

如上所示，要创建 Next.js API 路由，您需要将请求处理程序函数导出为默认值。请求处理函数接收两个参数：

req: 一个对象，它是的一个实例http.IncomingMessage，以及一些预构建的中间件
res: 一个对象，它是的一个实例http.ServerResponse，加上一些辅助函数

要使用 API 路由构建 API，请data在根目录中创建一个名为的文件夹。使用以下代码post.json在文件夹内创建一个文件：data

[
    {
        "标题": "我是标题 1",
        “正文”：“来自帖子 1 的你好”
    },
    {
        "标题": "我是标题 2",
        “正文”：“来自帖子 2 的你好”
    },
    {
        "标题": "我是标题 3",
        “正文”：“来自帖子 3 的你好”
    },
    {
        "标题": "我是标题 4",
        “正文”：“来自帖子 4 的你好”
    },
    {
        "标题": "我是标题 5",
        “正文”：“来自 5 号帖子的你好”
    }
]

现在，在文件夹中，使用以下代码pages/api/创建一个新文件：posts.js

// Next.js API 路由支持：https://nextjs.org/docs/api-routes/introduction
从“../../data/posts.json”导入帖子
导出默认函数处理程序（req，res）{
    res.status(200).json(帖子)
}

在上面的 API 路由中，处理函数导入 JSON 数据，posts并将其作为对请求的响应返回GET。当您通过浏览器访问查询此数据时http://localhost:3000/api/posts，您会得到：

您可以使用request.method如下所示的对象来处理其他 HTTP 请求：

导出默认值 (req, res) => {
  开关（req.method）{
    案例“获取”：
      //...
      休息
    案例“发布”：
      //...
      休息
    案例“PUT”：
      //...
      休息
    案例“删除”：
      //...
      休息
    默认：
      res.status(405).end() // 方法不允许
      休息
  }
}

宇宙工具箱会员版，日常小工具大全，聚合300多个功能全免费！

动态 API 路由

与页面路由一样，Next API 路由也支持动态路由。动态 API 路由遵循与页面路由相同的文件命名规则。

posts要详细说明这一点，请在文件夹内创建一个文件pages/api/夹。[postid.js]在文件夹内创建一个名为的posts文件，并为其添加以下代码：

// Next.js API 路由支持：https://nextjs.org/docs/api-routes/introduction
从“../../../data/posts.json”导入帖子
导出默认函数处理程序（req，res）{
    常量 { postid } = req.query;
    const post = posts.find((post => post.id === parseInt(postid)));
    res.status(200).json(post)
}

在上面的代码中， Next 自动将/posts/1路径与动态路由匹配pages/posts/[postid].js。id传递给路由的任何帖子/posts/[postid]: /post/2, /post/3,/post/4等都将在req.query对象中可用。

上面的请求处理函数id从req.query对象中检索传递的帖子，在posts数组中找到帖子，并将其发送给客户端。

因此，要获得带有idof的帖子1，请将浏览器导航到http://localhost:3000/api/posts/1. 你会得到：