भू-आधारित सामग्री नियंत्रण के लिए Next.js मिडलवेयर में एज फ़्लैग लागू करना

झंडा बनाएं

पैकेज सेटअप और इंस्टॉल करें

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>;
}

$ npx vercel

इसका परीक्षण करें

विकास में जियोलोकेशन

लिंक

• एज-फ्लैग
• उदाहरण कोड
• उदाहरण ऐप