Next.jsミドルウェアにEdge Flagsを実装して位置情報ベースのコンテンツ制御を行う方法

Edge Flagsは、サーバーレスアプリケーション向けのフィーチャーフラグを簡単に管理できるツールです。Upstash Redisを基盤としており、強力な地理位置情報ルールを備えています。
この記事では、Next.jsのミドルウェアでEdge Flagsを使用し、ユーザーの位置情報に基づいてリクエストを書き換える、シンプルな実装例をご紹介します。

1. フラグを作成する

今回のサンプルアプリでは、EU圏内のユーザーにのみコンテンツを公開したいと考えます。まず、新しいRedisデータベースを作成し、edge-flagsページへ移動しましょう。そこで、作成したデータベースとproduction環境を選択します。

次に、eu-countriesという名前の新しいフラグを作成し、EU加盟国をすべて追加します。

2. セットアップとパッケージのインストール

まだNext.jsアプリをお持ちでない場合は、npx create-next-appコマンドで新規作成できます。その後、以下のコマンドで@upstash/edge-flagsと@upstash/redisパッケージをインストールしてください。

$ npm install @upstash/edge-flags @upstash/redis

続いて、プロジェクトのルートにmiddleware.tsというファイルを新規作成し、以下のコードを記述します。

/middleware.ts

import { NextRequest, NextResponse } from "next/server";
 
import { Client as EdgeFlags } from "@upstash/edge-flags";
import { Redis } from "@upstash/redis";
 
const edgeFlags = new EdgeFlags({ redis: Redis.fromEnv() });
export default async function middleware(
 req: NextRequest,
): Promise<NextResponse> {
 const enabled = await edgeFlags
 .getFlag("eu-countries", req.geo ?? {})
 .catch((err) => {
 console.error(err);
 return false;
 });
 
 if (!enabled) {
 const url = new URL(req.url);
 url.pathname = "/blocked";
 return NextResponse.rewrite(url);
 }
 
 return NextResponse.next();
}
 
export const config = {
 matcher: "/",
};

最後に、アクセス拒否時に表示するための/blockedページをシンプルに作成します。

app/blocked/page.tsx

export default function Page() {
 return <div> You are not in the EU</div>;
}

あとは、プロジェクトをVercelにデプロイするだけです。

$ npx vercel

環境変数をVercelに設定する際は、Upstashコンソールから値をコピーするか、UpstashのVercel連携機能を利用すると便利です。

3. 動作確認

開発環境における地理位置情報の注意点

ローカル環境での開発中は、地理位置情報データを取得できません。実際の動作を確認するには、アプリをVercelにデプロイする必要があります。

デプロイ後は、アプリのトップページにアクセスして動作をチェックできます。EU圏内からアクセスした場合は通常どおりコンテンツが表示され、それ以外の地域からの場合はリクエストが/blockedページへリライトされます。

関連リンク

• Edge Flags（公式ドキュメント）
• サンプルコード
• サンプルアプリ