ควบคุม Traffic ตามประเทศสำหรับ Next.js Apps แบบ Seamless ด้วย Vercel Edge และ Upstash Edge Flags

ในโพสต์นี้ เราจะแสดงวิธี block traffic ไปยัง web app จากประเทศหนึ่ง คุณสามารถนำ logic เดียวกันไปจัดการ traffic ด้วย filters อื่นๆ (IP address, user-agent ฯลฯ) เรามุ่งเน้น decoupled, lightweight และ dynamic solution:

• ไม่ควรต้อง update และ deploy code เพื่ออัปเดตประเทศ
• ควรมี overhead และ cost ต่ำสุดต่อแอปพลิเคชัน

เราจะใช้ Vercel Edge Middleware และ Upstash Edge Flags

Vercel Edge Middleware

Vercel Edge middleware คือโค้ดที่ intercept web requests ก่อนถูกประมวลผลโดย backend เราจะใช้เช็ค country และ user agent เพราะ:

• เร็วและถูก
• Decoupled จากแอปพลิเคชันของคุณ

Upstash Edge Flags

แน่นอน คุณสามารถเช็ค country และ block traffic ด้วย if statement เรียบง่ายใน edge middleware code ได้ตามด้านล่าง:

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`);
}

ทำไมต้อง edge flags? Edge flags จะช่วยให้เราจัดการ rules ได้โดยไม่ต้อง update code

เริ่มกันเลย..

Step 1: Redis และ Edge Flags Setup

สร้าง Redis database บน Upstash Console เพื่อประสิทธิภาพดีที่สุด เลือก global และ regions ที่ผู้ใช้น่าจะอยู่

ไปที่หน้า Edge flags เลือก database ที่เพิ่งสร้าง สร้าง flag ใหม่ชื่อ blockTraffic เพิ่ม rule สำหรับ blocked countries: Country is in array United States → on

Save และ enable flag

Flag ข้างต้นจะ enabled ถ้า request มาจาก United States

Step 2: Next.js Project Setup

สร้าง Next.js application

npx create-next-app@latest --typescript

ติดตั้ง @upstash packages:

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

สร้าง middleware.ts (top level ใน project folder):

// /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: "/",
};

สร้างหน้าสำหรับ blocked:

// pages/blocked.tsx
import styles from "@/styles/Home.module.css";

export default function Blocked() {
  return (
    <div>
      <main className={styles.main}>
        <h3>Access blocked.</h3>
      </main>
    </div>
  );
}

แค่นี้! Deploy app ไป Vercel: vercel deploy

อย่าลืมเพิ่ม environment variables ไป Vercel ไม่ว่าจะ copy จาก Upstash console หรือใช้ Upstash integration

เข้าไปที่หน้า ควร redirect ไป blocked page ถ้าคุณอยู่ใน US ทดสอบประเทศต่างๆ ด้วย VPN

Geolocation ใน development

Geolocation data ไม่ available locally ต้อง deploy ไป Vercel ถึงจะทดสอบ app ได้

Links

Edge flags documentation

Vercel Edge middleware