Computer >> 컴퓨터 >  >> 프로그램 작성 >> Redis

Next.js 에지 함수 시작하기

Next.js 기능이란 무엇입니까? 왜 중요한가요?

오늘 Vercel 팀은 Next.js Edge 기능을 발표했습니다. 에지 기능을 통해 개발자는 전 세계에 분산된 서버에서 코드를 실행할 수 있습니다. 즉, 사용자와 가장 가까운 위치에서 코드가 실행됩니다. 에지 기능은 CDN 인프라에서 실행되는 서버리스 기능으로 생각할 수 있습니다. Edge 기능에는 다음과 같은 장점이 있습니다.

  • 글로벌 짧은 대기 시간:코드가 많은 글로벌 위치(PoP:접속 지점)에 복제되기 때문에 전 세계 어디에서나 사용자는 짧은 대기 시간을 경험하게 됩니다. 각 클라이언트는 가장 가까운 서버에서 응답을 가져옵니다.
  • 콜드 스타트 ​​없음:에지 인프라 제공업체는 콜드 스타트를 제거하는 V8 격리를 사용합니다. 이는 훨씬 더 빠른 시작을 의미합니다.

Next.js 기능 시작하기

여기에서 클라이언트의 위치에 따라 사용자 지정 인사말을 표시하는 Next.js 에지 함수를 작성합니다. Upstash Redis에서 인사말 메시지를 로드합니다.

리포지토리와 데모를 확인하세요.

1 Next.js 애플리케이션 생성 및 Upstash Redis 설치:

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

2 Redis 데이터베이스 생성:

Upstash 콘솔에서 최상의 에지 대기 시간을 위한 글로벌 데이터베이스를 생성합니다. 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 콘솔의 데이터베이스 페이지에서.

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는 엣지 기능을 위해 설계 및 최적화된 데이터 서비스입니다.

유용한 링크:

  • 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에서 여러분의 생각을 알려주세요.