home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

เริ่มต้นใช้งาน Next.js Edge Functions

ฟังก์ชัน Next.js คืออะไร เหตุใดจึงสำคัญ

วันนี้ ทีมงาน Vercel ได้ประกาศฟังก์ชัน Next.js Edge ฟังก์ชัน Edge ช่วยให้นักพัฒนาสามารถเรียกใช้โค้ดของตนที่เซิร์ฟเวอร์ที่กระจายไปทั่วโลก ซึ่งหมายความว่ารหัสของคุณจะถูกดำเนินการที่ตำแหน่งที่ใกล้กับผู้ใช้ของคุณมากที่สุด คุณสามารถนึกถึงฟังก์ชัน edge เป็นฟังก์ชันแบบไร้เซิร์ฟเวอร์ซึ่งทำงานที่โครงสร้างพื้นฐาน CDN ฟังก์ชัน Edge มีข้อดีดังต่อไปนี้:

  • Global low latency:เนื่องจากโค้ดถูกจำลองไปยังตำแหน่งต่างๆ ทั่วโลก (PoP:จุดแสดงตน) ผู้ใช้ที่ใดก็ได้ในโลกจะพบกับความหน่วงแฝงต่ำ ลูกค้าแต่ละรายจะดึงการตอบสนองจากเซิร์ฟเวอร์ที่ใกล้ที่สุด
  • ไม่มีการเริ่มเย็น:ผู้ให้บริการโครงสร้างพื้นฐานของ Edge ใช้ V8 Isolates ซึ่งกำจัดการเริ่มเย็น นี่หมายถึงการเริ่มต้นที่รวดเร็วขึ้นมาก

การเริ่มต้นใช้งานฟังก์ชัน Next.js

ที่นี่เราจะเขียนฟังก์ชันขอบ Next.js ซึ่งจะแสดงคำทักทายที่กำหนดเองขึ้นอยู่กับตำแหน่งของลูกค้า เราจะโหลดข้อความทักทายจาก Upstash Redis

ตรวจสอบ repo และการสาธิต

1 สร้างแอปพลิเคชัน Next.js และติดตั้ง Upstash Redis:

npx create-next-app@latest --typescript
cd nextjs-edge
npm install @upstash/redis

2 สร้างฐานข้อมูล Redis:

สร้างฐานข้อมูลทั่วโลกสำหรับความหน่วงแฝงของขอบที่ดีที่สุดใน Upstash Console เชื่อมต่อกับฐานข้อมูลของคุณด้วย redis-cli และเพิ่มข้อมูลคำทักทายดังต่อไปนี้:

global-promoted-chicken-30286.upstash.io:30286> set GB "Ey up?"
OK
global-promoted-chicken-30286.upstash.io:30286> set US "Yo, what’s up?"
OK
global-promoted-chicken-30286.upstash.io:30286> set TR "Naber dostum?"
OK
global-promoted-chicken-30286.upstash.io:30286> set DE "Was ist los?"
OK
global-promoted-chicken-30286.upstash.io:30286> set IN "Namaste"
OK

3 สร้างฟังก์ชันขอบ:

สร้างเพจ/api/_middleware.ts ดังนี้:

import type { NextFetchEvent, NextRequest } from "next/server";
import { Redis } from "@upstash/redis";

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const country = req.geo.country || "US";
  const redis = new Redis({
    url: "UPSTASH_REDIS_REST_URL",
    token: "UPSTASH_REDIS_REST_TOKEN",
  });
  const result = await redis.get<string>(country);
  const greeting = result || "Hello World!";
  return new Response(greeting);
}

คัดลอกและแทนที่ UPSTASH_REDIS_REST_URL และ UPSTASH_REDIS_REST_TOKEN จากหน้าฐานข้อมูลของคุณใน Upstash Console

4 เรียกใช้และปรับใช้:

เรียกใช้แอปพลิเคชันของคุณในเครื่อง:

npm run dev

ตรวจสอบ:https://localhost:3000/api/hello

คุณจะเห็นว่า req.geo ไม่ได้กำหนดไว้ ปรับใช้แอปของคุณกับ Vercel เพื่อดูว่าทำงานอย่างไรที่โครงสร้างพื้นฐาน Edge:

vercel deploy

ตรวจสอบ:https://nextjs-edge-enesakar-upstash.vercel.app/api/hello

คุณสามารถตรวจสอบคำทักทายจากสถานที่ต่างๆ ได้โดยใช้ VPN

บทสรุป

Next.js Edge เป็นข่าวดีสำหรับนักพัฒนาที่กำลังสร้างแอปพลิเคชันที่รวดเร็วทั่วโลก Upstash Redis เป็นบริการข้อมูลที่ได้รับการออกแบบและปรับให้เหมาะสมกับฟังก์ชัน Edge

ลิงค์ที่มีประโยชน์ที่นี่:

  • เอกสารประกอบฟังก์ชัน Next.js Edge:https://vercel.com/docs/concepts/functions/edge-functions
  • ตัวอย่าง Next.js Edge:https://github.com/vercel/examples/tree/main/edge-functions

แจ้งให้เราทราบความคิดเห็นของคุณบน Twitter หรือ Discord