Cloudflare가 Next.js 앱을 Vite 기반으로 구동하고 Cloudflare Workers, Netlify, AWS Lambda 등에 배포할 수 있는 프레임워크 Vinext 1.0을 출시했다. App Router와 Pages Router를 모두 지원하며, Cloudflare는 캐시 컴포넌트를 제외한 주요 기능의 테스트 호환성이 99%를 넘었다고 밝혔다.
Vinext는 기존 Next.js 앱을 옮기거나 새 앱을 만들 때 사용할 수 있다. Cloudflare에 따르면 기존 프로젝트는 다음 두 명령으로 호환성을 확인하고 Vite 및 배포 설정을 구성할 수 있다.
npx vinext check && npx vinext init
새 앱은 다음 명령으로 시작한다.
npm create vinext-app@latest my-app
Vinext 1.0은 App Router와 Pages Router, 두 라우터를 함께 쓰는 앱을 지원한다. React Server Components, Server Actions, API 경로, 라우트 핸들러, 미들웨어, 클라이언트 측 탐색도 포함한다. 페이지는 서버에서 렌더링하거나 빌드 중 미리 렌더링할 수 있고, 정적 파일로 내보내거나 페이지 단위 증분 정적 재생성(ISR)으로 캐시할 수 있다. 백그라운드 및 요청 시 재검증도 각 출력 방식에서 지원한다.
두 라우터와 지원 런타임에서 공통 캐시 함수를 제공하며, Cloudflare의 Workers Cache도 지원한다. Next.js 호환 추적 기능은 기존 OpenTelemetry 및 Sentry 설정과 함께 사용할 수 있고, Cloudflare Workers에서는 네이티브 Workers Observability와도 연결된다. 공개된 next/* 인터페이스와 인증, MDX, 이미지 최적화, 글꼴, 메타데이터, 환경 변수 등 일반적인 Next.js 패턴도 지원한다.
Cloudflare는 개발과 운영 환경에서 서버 코드를 workerd 런타임으로 실행할 수 있으며 이미지 최적화와 hyperdrive 같은 바인딩에 직접 접근할 수 있다고 설명했다. 다만 Next.js 16의 Cache Components를 구동하는 use cache 지시자는 현재 지원이 제한적이다. Cloudflare는 호환성을 계속 개선하되, 당장은 핵심 기능 지원에 더 집중한다고 밝혔다.
미리 렌더링과 캐시 준비
Vinext는 두 라우터에서 빌드 중 페이지를 미리 렌더링하고, 이를 페이지 단위 ISR로 제공한 뒤 경로나 태그를 기준으로 무효화할 수 있다. 완전히 정적인 사이트를 만들 때 쓰는 output: "export"도 지원한다.
Cloudflare는 수만~수십만 개의 URL을 빌드 중 순차적으로 렌더링하면 트래픽이 적은 페이지에도 시간이 들 수 있다고 설명했다. 이를 보완하는 캐시 준비 기능은 페이지 미리 렌더링을 빌드 머신 대신 Cloudflare 네트워크에서 수행한다. Next.js 기능으로 지정한 페이지에 더해 트래픽이 많은 페이지를 추가할 수 있으며, 배포 전에 백그라운드에서 캐시를 채운다.
배포 과정에서는 새 Worker 버전을 프로덕션 트래픽 0%로 올린 뒤 해당 버전으로 페이지를 요청해 렌더링과 캐시 채우기를 진행한다. 캐시가 준비되면 새 버전을 배포할 수 있다. 이 기능을 포함해 Cloudflare Workers에 배포하려면 다음 명령을 사용한다.
npx @vinext/cloudflare deploy --warm-cache
Cloudflare는 Vinext의 테스트 호환성이 캐시 컴포넌트를 제외하고 99%를 넘는다고 밝혔다. 테스트에는 두 라우터, 개발·프로덕션 서버, Node.js 및 Cloudflare Workers 배포 대상의 핵심 동작을 다루는 수천 개의 테스트가 포함된다. Next.js의 엔드투엔드 테스트도 매일 밤 Vinext에서 실행한다고 설명했다. 대규모 고객사와 운영 환경에서 발생할 수 있는 문제를 확인하고 있다는 설명도 덧붙였다.
Vinext는 오픈소스 저장소에서 이용할 수 있으며, 문서와 예제, 현재 호환성 표는 vinext.dev에서 확인할 수 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요