지역 기반 콘텐츠 제어를 위해 Next.js 미들웨어에 Edge 플래그 구현

Edge-Flags를 사용하면 서버리스 애플리케이션의 기능 플래그를 쉽게 관리할 수 있습니다. 이는 강력한 지리적 위치 규칙을 갖춘 Upstash Redis를 기반으로 구축되었습니다. 오늘 저는 Next.js 미들웨어에서 Edge-Flags를 사용하여 사용자 위치에 따라 요청을 다시 작성할 수 있는 방법에 대한 매우 간단한 예를 보여 드리겠습니다.

플래그 만들기

예제 앱에서는 EU 사용자에게만 콘텐츠를 제공하려고 하므로 새 Redis 데이터베이스를 생성한 다음 edge-flags 페이지로 이동하겠습니다. 생성된 데이터베이스와 production를 선택합니다. 환경.

그런 다음 eu-countries라는 새 플래그를 만들 수 있습니다. EU 내의 모든 국가를 추가하세요.

패키지 설정 및 설치

1. 기존 Next.js 앱이 없으면 npx create-next-app으로 앱을 만들 수 있습니다. @upstash/edge-flags를 설치하세요. 그리고 @upstash/redis 패키지:

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

1. 새 파일 만들기 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: "/",
};

1. 매우 정교한 /blocked 만들기 페이지

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

이제 남은 것은 프로젝트를 Vercel에 배포하는 것입니다:

$ npx vercel

Upstash 콘솔에서 복사하거나 Upstash 통합을 사용하여 Vercel에 환경 변수를 추가하세요.

테스트해 보세요

개발 중인 위치정보

로컬로 개발할 때는 지리적 위치 데이터를 사용할 수 없습니다. 테스트하려면 실제로 앱을 Vercel에 배포해야 합니다.

이제 앱의 색인 페이지를 방문하여 테스트해 볼 수 있습니다. EU에 거주하는 경우 콘텐츠가 표시되어야 하며, 그렇지 않으면 /blocked으로 리디렉션됩니다. 페이지.

링크

• 에지 플래그
• 예제 코드
• 예시 앱