Computer >> Máy Tính >  >> Lập trình >> Redis

Bắt đầu với Next.js Edge Functions

Hàm Next.js là gì? Tại sao chúng lại quan trọng?

Hôm nay, nhóm Vercel đã công bố các chức năng của Next.js Edge. Các chức năng của Edge cho phép các nhà phát triển chạy mã của họ tại các máy chủ được phân phối trên toàn cầu. Điều này có nghĩa là mã của bạn sẽ được thực thi tại vị trí gần nhất với người dùng của bạn. Bạn có thể coi các hàm cạnh là các hàm không máy chủ được chạy trên cơ sở hạ tầng CDN. Các hàm Edge có những ưu điểm sau:

  • Độ trễ thấp trên toàn cầu:Vì mã được sao chép tới nhiều vị trí toàn cầu (PoP:điểm hiện diện), người dùng ở bất kỳ đâu trên thế giới sẽ gặp phải độ trễ thấp. Mỗi máy khách sẽ tìm nạp phản hồi từ máy chủ gần nhất.
  • Không bắt đầu nguội:Các nhà cung cấp cơ sở hạ tầng Edge sử dụng V8 Isolates để loại bỏ các khởi động nguội. Điều này có nghĩa là khởi động nhanh hơn nhiều.

Bắt đầu với các hàm Next.js

Ở đây chúng tôi sẽ viết một hàm cạnh Next.js sẽ hiển thị một lời chào tùy chỉnh tùy thuộc vào vị trí của khách hàng. Chúng tôi sẽ tải thông điệp chào mừng từ Upstash Redis.

Kiểm tra repo và demo.

1 Tạo ứng dụng Next.js và cài đặt Upstash Redis:

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

2 Tạo cơ sở dữ liệu Redis:

Tạo cơ sở dữ liệu toàn cầu để có độ trễ cạnh tốt nhất trong Upstash Console. Kết nối với cơ sở dữ liệu của bạn bằng redis-cli và thêm một số dữ liệu chào mừng như bên dưới:

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 Tạo hàm cạnh:

Tạo các trang / api / _middleware.ts như bên dưới:

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

Sao chép và thay thế UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN từ trang cơ sở dữ liệu của bạn trong Upstash Console.

4 Chạy và Triển khai:

Chạy ứng dụng của bạn cục bộ:

npm run dev

Kiểm tra:https:// localhost:3000 / api / hello

Bạn sẽ thấy rằng req.geo không được xác định. Triển khai ứng dụng của bạn với Vercel để xem nó đang hoạt động như thế nào tại cơ sở hạ tầng Edge:

vercel deploy

Kiểm tra:https://nextjs-edge-enesakar-upstash.vercel.app/api/hello

Bạn có thể kiểm tra lời chào từ các vị trí khác nhau bằng VPN.

Kết luận

Next.js Edge là một tin tuyệt vời cho các nhà phát triển đang xây dựng các ứng dụng nhanh trên toàn cầu. Upstash Redis là một dịch vụ dữ liệu được thiết kế và tối ưu hóa cho các chức năng cạnh.

Dưới đây là các liên kết hữu ích:

  • Tài liệu về các hàm Edge của Next.js:https://vercel.com/docs/concept/functions/edge-functions
  • Ví dụ về Next.js Edge:https://github.com/vercel/examples/tree/main/edge-functions

Hãy cho chúng tôi biết suy nghĩ của bạn trên Twitter hoặc Discord.