Next.js मिडलवेयर में एज फ्लैग लागू करना जियो-आधारित कंटेंट कंट्रोल के लिए

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

2. 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: "/", };

3. ब्लॉक किए गए के लिए एक बहुत परिष्कृत /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 पर डेप्लॉय करना होगा।

अब आप अपने ऐप के इंडेक्स पेज पर जाकर इसे टेस्ट कर सकते हैं। यदि आप EU में हैं तो आपको सामग्री दिखाई देनी चाहिए, अन्यथा आपको /blocked पेज पर रीडायरेक्ट किया जाएगा।

लिंक

• Edge-Flags
• उदाहरण कोड
• उदाहरण ऐप