การควบคุมการรับส่งข้อมูลตามประเทศที่ราบรื่นสำหรับแอป Next.js พร้อม Vercel Edge และ Upstash Edge Flags

ธงด้านบนจะเปิดใช้งานหากคำขอมาจากสหรัฐอเมริกา

ขั้นตอนที่ 2:การตั้งค่าโครงการ Next.js

สร้างแอปพลิเคชัน Next.js

npx create-next-app@latest --typescript

ติดตั้งแพ็คเกจ @upstash:

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

สร้าง 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("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>
 );
}

นั่นคือทั้งหมด! ตอนนี้คุณสามารถปรับใช้แอปกับ Vercel:53

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

ไปที่หน้านั้น คุณควรถูกเปลี่ยนเส้นทางไปยังหน้าที่ถูกบล็อก หากคุณอยู่ในสหรัฐอเมริกา ทดสอบประเทศต่างๆ โดยใช้ VPN

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

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

ลิงก์

เอกสารประกอบการตั้งค่าสถานะ Edge

มิดเดิลแวร์ Vercel Edge