वर्सेल एज और अपस्टैश एज फ्लैग के साथ Next.js ऐप्स के लिए निर्बाध देश-आधारित ट्रैफ़िक नियंत्रण

• मुझे देश को अपडेट करने के लिए कोड को अपडेट और तैनात करने की आवश्यकता नहीं होनी चाहिए।
• मेरे आवेदन पर इसका न्यूनतम ओवरहेड और लागत होनी चाहिए।

वर्सेल एज मिडलवेयर

• यह तेज़ और सस्ता है।
• आपके एप्लिकेशन से अलग कर दिया गया।

अपस्टैश एज फ़्लैग्स

const BLOCKED_COUNTRY = "BAD_COUNTRY";
 
export function middleware(req: NextRequest) {
 const country = req.geo.country;
 
 if (country === BLOCKED_COUNTRY) {
 return new Response("Blocked ", { status: 451 });
 }
 return new Response(`Greetings`);
}

चरण 1:रेडिस और एज फ़्लैग्स सेटअप

चरण 2:Next.js प्रोजेक्ट सेटअप

npx create-next-app@latest --typescript

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

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("blockTraffic", req.geo ?? {});
 
 if (!enabled) {
 const url = new URL(req.url);
 url.pathname = "/blocked";
 return NextResponse.rewrite(url);
 }
 
 return NextResponse.next();
}
 
export const config = {
 matcher: "/",
};

import styles from "@/styles/Home.module.css";
 
export default function Blocked() {
 return (
 <div>
 <main className={styles.main}>
 <h3>Access blocked.</h3>
 </main>
 </div>
 );
}

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

लिंक