使用 Edge Functions 最大化 Next.js 13 应用程序的性能

在云计算中，术语边缘功能是指位于或靠近网络边缘的计算能力，通常更靠近数据源。在本分步教程中，您将学习如何使用 Next.js 13 轻松创建 Edge Functions。

边缘功能用于在靠近生成位置的地方处理数据，而不是将所有数据发送到集中式云进行处理。这减少了数据传输所需的延迟和带宽，并可以提高基于云的应用程序的效率、可扩展性和安全性。

无服务器功能与边缘功能

Edge Functions 可以理解为 Serverless 函数的变体。如何在 Windows PC 或 Mac 计算机上设置双显示器为了解释，让我们将 Edge Functions 与无服务器函数进行比较。

部署在 Vercel 上的无服务器功能在位于世界某个地方的服务器上运行。对函数的请求在服务器上执行。如果请求来自靠近服务器的位置，则速度很快。但是，如果它来自很远的地方，则响应速度较慢。

Edge Functions 解决了这个问题。简而言之，Edge Functions 是在靠近用户的地方运行的无服务器功能，无论用户身在何处，都能产生快速请求。

1. 创建一个新的 Next.js 13 项目

让我们开始使用以下命令创建一个新的 Next.js 13 项目：

$ npx create-next-app@latest --experimental-app

点击回车键后，您将被引导完成在命令行上创建新 Next.js 13 项目的过程。您需要为新项目指定一个名称并回答以下问题：

项目创建成功后，我们就可以进入新建的项目目录next13_edge_function，接下来启动应用程序。

2. 添加新的 API 路由

为了创建一个新的独立 Edge Function，请在默认项目结构的 pages/api 文件夹中创建一个新文件。让我们将此文件命名为 myapi.ts，如下所示：

3.添加实现

让我们通过将以下代码行插入 myapi.ts 来开始实施：

import { NextRequest, NextResponse } from 'next/server';

const handler = (req: NextRequest) => {
  return NextResponse.json({
    name: `Hello, from ${req.url} I'm now an Edge Function!`,
  });
};

export default handler;

此代码导出一个名为 handler 的函数，该函数接受 NextRequest 类型的对象 req 作为参数。该函数返回一个 JSON 响应对象，其属性名称包含一个字符串“Hello，来自 [request URL] 我现在是 Edge Function！”。响应字符串包括传入请求的 URL。此代码是 Next.js 应用程序中 HTTP 请求的基本处理程序。

4.设置Edge Runtime

接下来让我们添加以下代码：

export const config = {
  runtime: 'edge',
};

此代码导出具有单个属性运行时的对象配置，该属性设置为字符串值“edge”。配置对象指定 Next.js API 路由的配置选项。属性 runtime 用于指定执行处理程序函数的运行时环境。值“edge”指定应用程序在边缘计算平台上执行。

同样，在以下清单中，您可以看到 myapi.ts 的完整源代码：

import { NextRequest, NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

const handler = (req: NextRequest) => {
  return NextResponse.json({
    name: `Hello, from ${req.url} I'm now an Edge Function!`,
  });
};

export default handler;

5. 部署到 Vercel

最后，我们准备部署到 Vercel 平台。首先确保使用以下命令安装最新版本的 Vercel CLI：

$ npm i -g vercel@latest

接下来，在 vercel.com 上注册一个免费帐户，以便您能够访问仪表板：

在 Next.js 项目目录中执行带选项 deploy 的 vercel 命令：

$ vercel deploy

然后，您需要使用之前在注册 Vercel 帐户时使用的凭据登录：

然后部署会自动完成，在该过程完成后，您应该能够在 Vercel 的仪表板中看到已部署的 Next.js 应用程序。

从这里您可以访问 Functions 选项卡，并看到位于 api/myapi 的 API 函数已部署到全局边缘网络：

当您现在使用 Vercel 提供的 URL（并使用 API 端点 api/myapi 扩展此 URL）访问该函数时，您应该能够从我们在边缘网络中执行的 API 函数接收响应：

Edge API 功能已上线并正在运行！