Computer >> 컴퓨터 >  >> 프로그래밍 >> Redis

Next.js 엣지 함수 시작하기: Vercel로 만드는 글로벌 저지연 애플리케이션

Next.js 엣지 함수란 무엇이며, 왜 중요한가?

최근 Vercel 팀이 Next.js 엣지 함수(Edge Functions)를 발표했습니다. 엣지 함수를 활용하면 개발자는 전 세계에 분산 배치된 서버에서 코드를 실행할 수 있으며, 그 결과 코드는 사용자와 가장 가까운 위치에서 실행됩니다. 엣지 함수는 CDN 인프라 위에서 동작하는 서버리스 함수라고 이해하면 쉽습니다.

엣지 함수의 대표적인 장점은 다음과 같습니다.

  • 글로벌 저지연(Low Latency): 코드가 전 세계 여러 거점(PoP, Points of Presence)에 복제되기 때문에, 세계 어느 곳의 사용자든 낮은 지연 시간을 경험합니다. 모든 클라이언트는 자신과 가장 가까운 서버로부터 응답을 받습니다.
  • 콜드 스타트(Cold Start) 없음: 엣지 인프라는 V8 Isolate 기술을 사용해 콜드 스타트 문제를 제거했습니다. 덕분에 함수가 훨씬 빠르게 시작됩니다.

Next.js 엣지 함수 시작하기

이번 튜토리얼에서는 클라이언트의 위치(국가)에 따라 맞춤형 인사말을 응답으로 반환하는 Next.js 엣지 함수를 만들어 보겠습니다. 인사말 데이터는 Upstash Redis에서 불러옵니다.

전체 소스 코드는 GitHub 저장소에서, 실제 동작 결과는 데모 페이지에서 확인할 수 있습니다.

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

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

2단계: Redis 데이터베이스 생성

최상의 엣지 지연 성능을 위해 Upstash 콘솔에서 Global 데이터베이스를 생성합니다. 이후 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단계: 엣지 함수 작성

아래와 같이 pages/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 콘솔의 데이터베이스 페이지에서 UPSTASH_REDIS_REST_URL과 UPSTASH_REDIS_REST_TOKEN 값을 복사해 위 코드에 붙여넣으세요.

4단계: 실행 및 배포

먼저 애플리케이션을 로컬에서 실행합니다.

npm run dev

브라우저에서 https://localhost:3000/api/hello에 접속해 결과를 확인합니다. 로컬 환경에서는 req.geo 값이 정의되지 않기 때문에, 엣지 인프라에서의 실제 동작을 확인하려면 Vercel에 배포해야 합니다.

vercel deploy

배포 후 데모 URL(https://nextjs-edge-enesakar-upstash.vercel.app/api/hello)에 접속해 보세요. VPN으로 접속 지역을 바꿔가며 요청하면, 국가별로 다른 인사말이 반환되는 것을 확인할 수 있습니다.

마무리

Next.js 엣지 기능은 전 세계 사용자에게 빠른 경험을 제공하는 애플리케이션을 만드는 개발자들에게 반가운 소식입니다. Upstash Redis는 엣지 함수 환경에 맞춰 설계·최적화된 데이터 서비스로, 이런 엣지 애플리케이션과 완벽하게 어울립니다.

참고할 만한 링크는 아래와 같습니다.

  • Next.js 엣지 함수 공식 문서: https://vercel.com/docs/concepts/functions/edge-functions
  • Next.js 엣지 함수 예제: https://github.com/vercel/examples/tree/main/edge-functions

Twitter 또는 Discord를 통해 여러분의 의견을 들려주세요.