Cloudflare가 Next.js 애플리케이션을 Vite 위에서 실행하고 Cloudflare Workers, Netlify, AWS Lambda와 같은 플랫폼에 배포할 수 있는 오픈 소스 프레임워크 Vinext 1.0을 출시했다. 이 프로젝트는 최신 Next.js 구조로 지원을 제한하는 대신 Pages Router 또는 App Router를 사용하는 애플리케이션을 포함해 신규 애플리케이션과 기존 프로젝트를 대상으로 한다.
Next.js 애플리케이션과의 폭넓은 호환성
Vinext는 2월 출시 당시 일주일 동안 진행된 인공지능 기반 실험에서, Cloudflare가 고트래픽·동적 애플리케이션에서 프로덕션에 사용된다고 설명하는 프레임워크로 발전했다. 회사는 고객이 요청한 대부분의 기능과의 호환성이 99%를 넘는다고 밝히며, 동일한 이름을 가진 API를 단순히 모방하는 것이 아니라 애플리케이션의 실제 동작을 계속 테스트하고 있다고 설명한다.
이번 버전은 App Router와 Pages Router, 하이브리드 애플리케이션, 서버 측 React 컴포넌트, 서버 액션, API 경로, 라우트 핸들러, 미들웨어, 클라이언트 측 내비게이션을 지원한다. 또한 서버에서 페이지를 렌더링하는 방식, 페이지의 점진적 재생성(ISR), 정적 자산으로의 내보내기, 백그라운드 또는 요청 시 재검증도 지원한다.
실제로 무엇이 달라지는가?
Vinext는 두 라우터와 지원되는 실행 환경 간 캐싱 기능을 통합하고 Workers Cache에 대한 추가 지원을 제공한다. 또한 Next.js와 호환되는 추적 기능을 제공해 기존 OpenTelemetry 및 Sentry 설정을 계속 사용할 수 있으며, Cloudflare Workers에서는 Workers의 기본 모니터링 도구와 통합된다.
이번 버전은 개발 및 프로덕션 환경에서 workerd를 직접 지원하며, 이미지 최적화와 Hyperdrive 같은 Cloudflare 링크에 접근할 수 있다. 반면 Cache Components와 연관된 use cache 라우팅 지원은 여전히 제한적이다. Cloudflare는 현재 우선순위가 프로덕션 애플리케이션이 의존하는 프레임워크의 핵심 기능이라고 설명한다.
출시 전 캐시 예열
Vinext 1.0은 빌드 과정에서 App Router와 Pages Router의 페이지를 미리 렌더링한 다음 ISR을 통해 제공하고 경로 또는 태그에 따라 무효화하는 메커니즘을 제공한다. 그러나 수만 또는 수십만 개의 URL을 포함하는 애플리케이션을 위해 사전 렌더링의 일부를 빌드 머신에서 Cloudflare 네트워크로 옮기는 다른 옵션도 추가한다.
cache warming 기능은 일반적인 Next.js 지표를 사용해 준비해야 할 페이지를 식별하며, 트래픽이 많은 페이지를 지정할 수도 있다. 새 버전을 프로덕션 트래픽으로 전환하기 전에 Cloudflare는 트래픽 비율이 0%인 Worker 버전을 배포한 뒤 해당 버전에서 페이지를 요청해 캐시를 채운다. 작업이 완료되면 배포를 승격할 수 있다. 이를 통해 방문이 적은 페이지를 순차적으로 빌드할 때 발생하는 대기 시간을 줄일 수 있지만, 이 기능을 사용할 경우 실제로 Cloudflare에 배포해야 한다.
테스트와 마이그레이션 경로
Cloudflare는 이 프로젝트가 프레임워크 동작, 개발 및 프로덕션 모드의 서버, Node.js와 Cloudflare Workers의 배포 대상을 다루는 수천 건의 테스트에 기반한다고 설명한다. 또한 업스트림 변경으로 인한 회귀를 감지하기 위해 매일 밤 Vinext에서 Next.js의 포괄적인 테스트 모음을 실행한다. 마이그레이션 과정에는 프로젝트 호환성, Vite 설정, 배포 구성을 확인하면서 기존 Next.js 프로젝트 구조를 유지하는 두 가지 명령이 포함된다. npx vinext check 다음에 npx vinext init을 실행하면 된다.
Vinext는 신규 및 기존 프로젝트에서 사용할 수 있으며, npx @vinext/cloudflare deploy --warm-cache 명령을 사용하면 캐시 예열과 함께 Cloudflare Workers에 배포할 수 있다. 호환성 매트릭스와 Cache Components 같은 기능에 대한 미완성 지원은 복잡한 애플리케이션에서 마이그레이션을 도입하기 전에 팀이 검토해야 할 사항으로 남아 있다.