地理ベースのコンテンツ コントロール用の Next.js ミドルウェアでのエッジ フラグの実装

Edge-Flags を使用すると、サーバーレス アプリケーションの機能フラグを簡単に管理できます。これは、強力な地理位置情報ルールを備えた Upstash Redis の上に構築されています。今日は、Next.js ミドルウェアで Edge-Flags を使用して、ユーザーの位置に基づいてリクエストを書き換える方法の非常に簡単な例を示します。

フラグを作成する

このサンプル アプリでは、EU 内のユーザーのみがコンテンツを利用できるようにしたいため、新しい Redis データベースを作成して、エッジ フラグ ページに移動します。作成したデータベースと production を選択します。 環境。

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

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

<オル>

既存の 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

Upstash コンソールから環境変数をコピーするか、Upstash 統合を使用して、必ず環境変数を Vercel に追加してください。

試してみる

地理位置情報は開発中

ローカルで開発する場合、地理位置情報データは利用できません。アプリを実際に Vercel にデプロイしてテストする必要があります。

これで、アプリのインデックス ページにアクセスしてテストできるようになりました。 EU 内にいる場合はコンテンツが表示されます。それ以外の場合は /blocked にリダイレクトされます。 ページ。

リンク

• エッジフラグ
• コード例
• サンプルアプリ