Next.js Middleware-এ Edge Flags বাস্তবায়ন করে জিও-ভিত্তিক কন্টেন্ট কন্ট্রোল

Edge-Flags আপনাকে আপনার সার্ভারলেস অ্যাপ্লিকেশনের জন্য ফিচার ফ্ল্যাগ সহজে ম্যানেজ করতে দেয়। এটি আপস্ট্যাশ রেডিসের ওপর বিল্ট একটি শক্তিশালী জিওলোকেশন রুলসহ। আজ আমি আপনাকে একটি খুব সিম্পল উদাহরণ দেখাব কীভাবে আপনি একটি Next.js middleware-এ Edge-Flags ব্যবহার করতে পারেন ব্যবহারকারীর লোকেশন অনুযায়ী রিকোয়েস্ট রিরাইট করতে।

ফ্ল্যাগ তৈরি করুন

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

/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 পেজ তৈরি করুন

app/blocked/page.tsx
export default function Page() {
  return 
 You are not in the EU
;
}

এখন বাকি থাকছে প্রজেক্টটি Vercel-এ ডিপ্লয় করা:

$ npx vercel

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

টেস্ট করুন

ডেভেলপমেন্টে জিওলোকেশন

লোকালি ডেভেলপ করার সময় জিওলোকেশন ডেটা উপলব্ধ নয়। অ্যাপটি Vercel-এ ডিপ্লয় করতে হবে টেস্ট করার জন্য।

এখন আপনি আপনার অ্যাপের ইনডেক্স পেজ ভিজিট করে টেস্ট করতে পারেন। আপনি যদি EU-তে থাকেন, আপনি কন্টেন্ট দেখবেন, অন্যথায় আপনি /blocked পেজে রিডাইরেক্ট হবেন।

লিংকসমূহ

• Edge-Flags
• Example Code
• Example App