Triển khai Edge Flag trong Next.js Middleware để kiểm soát nội dung dựa trên địa lý

Edge-Flags cho phép bạn dễ dàng quản lý các cờ tính năng cho các ứng dụng không có máy chủ của mình. Nó được xây dựng dựa trên Upstash Redis với các quy tắc định vị địa lý mạnh mẽ. Hôm nay tôi sẽ chỉ cho bạn một ví dụ rất đơn giản về cách bạn có thể sử dụng Edge-Flags trong phần mềm trung gian Next.js để viết lại các yêu cầu dựa trên vị trí của người dùng.

Tạo cờ

Trong ứng dụng ví dụ của chúng tôi, chúng tôi chỉ muốn cung cấp nội dung cho người dùng ở Liên minh Châu Âu, vì vậy, chúng tôi sẽ tạo cơ sở dữ liệu Redis mới rồi chuyển đến trang cờ cạnh. Chọn cơ sở dữ liệu đã tạo và production môi trường.

Sau đó chúng ta có thể tạo một lá cờ mới có tên eu-countries và thêm tất cả các quốc gia trong EU.

Thiết lập và cài đặt các gói

1. Nếu hiện tại chưa có ứng dụng Next.js, bạn có thể tạo một ứng dụng bằng npx create-next-app và cài đặt @upstash/edge-flags và @upstash/redis gói:

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

1. Tạo một tệp mới middleware.ts trong thư mục gốc của dự án và thêm đoạn mã sau:

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. Tạo một /blocked rất phức tạp trang

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

Bây giờ tất cả những gì còn lại là triển khai dự án lên Vercel:

$ npx vercel

Đảm bảo thêm các biến môi trường vào Vercel bằng cách sao chép chúng từ bảng điều khiển Upstash hoặc bằng cách sử dụng tích hợp Upstash.

Thử nghiệm

Định vị địa lý đang phát triển

Dữ liệu định vị địa lý không có sẵn khi phát triển cục bộ. Bạn thực sự cần phải triển khai ứng dụng cho Vercel để thử nghiệm.

Bây giờ bạn có thể kiểm tra nó bằng cách truy cập trang chỉ mục của ứng dụng. Nếu bạn ở EU, bạn sẽ xem nội dung, nếu không bạn sẽ được chuyển hướng đến /blocked trang.

Liên kết

• Cờ cạnh
• Mã ví dụ
• Ứng dụng mẫu