Next.jsエッジ関数の使用を開始する

Next.js関数とは何ですか？なぜそれらが重要なのですか？

本日、VercelチームはNext.jsEdge関数を発表しました。エッジ関数を使用すると、開発者はグローバルに分散されたサーバーでコードを実行できます。これは、コードがユーザーに最も近い場所で実行されることを意味します。エッジ機能は、CDNインフラストラクチャで実行されるサーバーレス機能と考えることができます。エッジ関数には次の利点があります。

• グローバルな低遅延：コードは多くのグローバルな場所（PoP：Point of Presence）に複製されるため、世界中のユーザーは低遅延を経験します。各クライアントは、最も近いサーバーから応答をフェッチします。
• コールドスタートなし：エッジインフラストラクチャプロバイダーは、コールドスタートを排除するV8Isolatesを使用します。これは、はるかに高速な起動を意味します。

Next.js関数入門

ここでは、クライアントの場所に応じてカスタムグリーティングを表示するNext.jsエッジ関数を記述します。 UpstashRedisからグリーティングメッセージをロードします。

リポジトリとデモを確認してください。

1 Next.jsアプリケーションを作成し、UpstashRedisをインストールします。

npx create-next-app@latest --typescript
cd nextjs-edge
npm install @upstash/redis

2 Redisデータベースを作成します：

UpstashConsoleで最高のエッジレイテンシーを実現するグローバルデータベースを作成します。 redis-cliを使用してデータベースに接続し、以下のように挨拶データを追加します。

global-promoted-chicken-30286.upstash.io:30286> set GB "Ey up?"
OK
global-promoted-chicken-30286.upstash.io:30286> set US "Yo, what’s up?"
OK
global-promoted-chicken-30286.upstash.io:30286> set TR "Naber dostum?"
OK
global-promoted-chicken-30286.upstash.io:30286> set DE "Was ist los?"
OK
global-promoted-chicken-30286.upstash.io:30286> set IN "Namaste"
OK

3 エッジ関数を作成します：

以下のようにpages/api / _middleware.tsを作成します：

import type { NextFetchEvent, NextRequest } from "next/server";
import { Redis } from "@upstash/redis";

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const country = req.geo.country || "US";
  const redis = new Redis({
    url: "UPSTASH_REDIS_REST_URL",
    token: "UPSTASH_REDIS_REST_TOKEN",
  });
  const result = await redis.get<string>(country);
  const greeting = result || "Hello World!";
  return new Response(greeting);
}

UPSTASH_REDIS_REST_URLをコピーして置き換えます およびUPSTASH_REDIS_REST_TOKEN Upstashコンソールのデータベースページから。

4 実行と展開：

アプリケーションをローカルで実行します：

npm run dev

チェック：http：// localhost：3000 / api / hello

req.geoが表示されます 定義されていません。アプリをVercelにデプロイして、Edgeインフラストラクチャでどのように機能しているかを確認します。

vercel deploy

チェック：https：//nextjs-edge-enesakar-upstash.vercel.app/api/hello

VPNを使用して、さまざまな場所からの挨拶を確認できます。