การใช้ Edge Flags ในมิดเดิลแวร์ Next.js สำหรับการควบคุมเนื้อหาตามภูมิศาสตร์

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

1. สร้างไฟล์ใหม่ 51 ในรูทของโปรเจ็กต์ของคุณและเพิ่มโค้ดต่อไปนี้:

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. สร้าง 69 ที่ซับซ้อนมาก หน้า

export default function Page() {
 return <div> You are not in the EU</div>;
}

ตอนนี้สิ่งที่เหลืออยู่คือการปรับใช้โปรเจ็กต์กับ Vercel:

$ npx vercel

ตรวจสอบให้แน่ใจว่าได้เพิ่มตัวแปรสภาพแวดล้อมให้กับ Vercel โดยการคัดลอกจากคอนโซล Upstash หรือโดยใช้การรวม Upstash

ทดสอบเลย

ตำแหน่งทางภูมิศาสตร์ในการพัฒนา

ข้อมูลตำแหน่งทางภูมิศาสตร์ไม่พร้อมใช้งานเมื่อพัฒนาในพื้นที่ คุณต้องปรับใช้แอปกับ Vercel จริง ๆ เพื่อทดสอบ

ตอนนี้คุณสามารถทดสอบได้โดยไปที่หน้าดัชนีของแอปของคุณ หากคุณอยู่ในสหภาพยุโรป คุณควรเห็นเนื้อหา ไม่เช่นนั้นคุณจะถูกเปลี่ยนเส้นทางไปที่ 74 หน้า.

ลิงก์

• Edge-Flags
• โค้ดตัวอย่าง
• แอปตัวอย่าง