Next.js Edge Functions入門：Upstash Redisと組み合わせて位置情報対応の挨拶APIを作ってみよう

Next.jsのEdge Functions（エッジ関数）とは？なぜ重要なのか？

本日、VercelチームがNext.jsの「Edge Functions（エッジ関数）」を発表しました。Edge Functionsを利用すると、開発者は世界各地に分散配置されたサーバー上でコードを実行できます。つまり、あなたのコードはユーザーから最も近いロケーションで実行されるということです。「CDNインフラ上で動作するサーバーレス関数」と捉えるとイメージしやすいでしょう。主なメリットは以下の2点です。

• グローバルな低レイテンシ：コードは世界中の多数の拠点（PoP：Points of Presence）に複製されるため、どの地域のユーザーでも低レイテンシを体感できます。各クライアントは最寄りのサーバーからレスポンスを取得します。
• コールドスタートなし：エッジインフラ事業者はV8 Isolateを採用しており、コールドスタートが発生しません。これにより、非常に高速な起動が可能になります。

Next.js Edge Functionsの始め方

ここでは、クライアントの所在地に応じてカスタマイズされた挨拶メッセージを返すNext.jsのエッジ関数を作成します。挨拶メッセージはUpstash Redisから読み込む構成です。

サンプルのリポジトリとデモも公開されていますので、あわせてご覧ください。

1. Next.jsアプリケーションの作成とUpstash Redisのインストール

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

2. Redisデータベースの作成

エッジ環境で最良のレイテンシを実現するため、Upstash ConsoleでGlobalデータベースを作成します。続いて、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 Consoleのデータベースページに記載されている UPSTASH_REDIS_REST_URL と UPSTASH_REDIS_REST_TOKEN の値をコピーして置き換えてください。

4. 実行とデプロイ

まず、アプリケーションをローカルで起動します。

npm run dev

確認URL：https://localhost:3000/api/hello

ローカル環境では req.geo が未定義になっていることに気づくはずです。エッジインフラ上での実際の動作を確認するには、アプリをVercelにデプロイします。

vercel deploy

VPNなどを利用すれば、アクセス元の地域によって返される挨拶メッセージが切り替わる様子を確認できます。

まとめ

Next.js Edgeは、グローバルに高速なアプリケーションを構築したい開発者にとって大きな朗報です。また、Upstash Redisはエッジ関数向けに設計・最適化されたデータサービスであり、両者は非常に相性の良い組み合わせです。

参考リンク：

• Next.js Edge Functions公式ドキュメント：https://vercel.com/docs/concepts/functions/edge-functions
• Next.js Edgeのサンプル集：https://github.com/vercel/examples/tree/main/edge-functions

ご意見やフィードバックがあれば、TwitterまたはDiscordでお気軽にお知らせください。