জিও-ভিত্তিক বিষয়বস্তু নিয়ন্ত্রণের জন্য Next.js মিডলওয়্যারে এজ ফ্ল্যাগ প্রয়োগ করা

এজ-ফ্ল্যাগগুলি আপনাকে আপনার সার্ভারহীন অ্যাপ্লিকেশনগুলির জন্য সহজেই বৈশিষ্ট্য পতাকাগুলি পরিচালনা করতে দেয়৷ এটি শক্তিশালী ভূ-অবস্থানের নিয়মগুলির সাথে Upstash Redis-এর উপরে তৈরি করা হয়েছে৷ আজ আমি আপনাকে ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে অনুরোধগুলি পুনরায় লেখার জন্য একটি Next.js মিডলওয়্যারে এজ-ফ্ল্যাগগুলি কীভাবে ব্যবহার করতে পারেন তার একটি খুব সাধারণ উদাহরণ দেখাব৷

পতাকা তৈরি করুন

আমাদের উদাহরণ অ্যাপে আমরা শুধুমাত্র EU-তে আমাদের ব্যবহারকারীদের জন্য সামগ্রী উপলব্ধ করতে চাই, তাই আমরা একটি নতুন Redis ডাটাবেস তৈরি করব এবং তারপর প্রান্ত-পতাকা পৃষ্ঠায় যাব৷ তৈরি করা ডেটাবেস এবং 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>;
}

এখন যা বাকি আছে তা হল ভার্সেল:

$ npx vercel

Upstash কনসোল থেকে অনুলিপি করে অথবা Upstash ইন্টিগ্রেশন ব্যবহার করে Vercel-এ এনভায়রনমেন্ট ভেরিয়েবল যোগ করা নিশ্চিত করুন।

এটি পরীক্ষা করে দেখুন

উন্নয়নে ভৌগলিক অবস্থান

স্থানীয়ভাবে বিকাশ করার সময় ভূ-অবস্থান ডেটা পাওয়া যায় না। এটি পরীক্ষা করার জন্য আপনাকে Vercel-এ অ্যাপটি স্থাপন করতে হবে।

এখন আপনি আপনার অ্যাপের সূচী পৃষ্ঠায় গিয়ে এটি পরীক্ষা করতে পারেন। আপনি যদি EU-তে থাকেন তাহলে আপনার বিষয়বস্তু দেখতে হবে, অন্যথায় আপনাকে /blocked-এ পুনঃনির্দেশিত করা হবে পৃষ্ঠা।

লিঙ্কগুলি

• এজ-পতাকা
• উদাহরণ কোড
• উদাহরণ অ্যাপ