스킬

vinext로 Vite 위에서 Workers를 향한 Next.js를 돌린다

공식 create로 Vite 위에서 Next.js를 돌리고 Cloudflare Workers를 향하게 한다. 아직 모든 프로덕션 앱의 플러그 앤 플레이 대체는 아니다.

Official source · cloudflare/vinext

Install

pnpm create vinext-app@latest my-app

누구에게 맞나

이 기술은 이미 Next.js를 쓰고 있고 Vite로 옮기며 Cloudflare Workers를 주 배포 대상으로 삼고 싶은 사람에게 맞다. 공식은 이렇게 쓴다: Vite 위에서 Next.js 앱을 돌리며, 첫 착지 환경은 Cloudflare Workers. 이 기기에 예시 디렉터리를 만들 준비가 되고 공식 생성 명령이 디스크에 쓰는 것을 받아들일 수 있는 사람에게도 맞다.

원문은 Claude Code, OpenCode, Cursor, Codex 및 다른 많은 AI 코딩 도구와 함께 쓸 수 있다고도 한다. 이는 예시 목록이며 이 네 가지만 지원한다고 읽으면 안 된다. 정적 페이지만 하거나 배포 대상이 애초에 Workers가 아니면 설명만 읽는다.

현재 프로덕션 앱을 「바꾸면 돌아간다」고 다루는 것에도 맞지 않는다. 공식은 분명하다: 오늘은 무게 있는 Next.js 앱을 꽤 지탱할 수 있지만, 모든 앱이나 프로덕션 부하의 플러그 앤 플레이 대체는 아직 아니다. 공식 저장소는 https://github.com/cloudflare/vinext 그 페이지에 이미 적힌 명령으로 조작한다.

3분 만에 첫 시도 끝내기

공식이 적은 새 프로젝트 경로만 간다.

전제: 이 기기에서 pnpm을 실행할 수 있고, 현재 디렉터리에 새 폴더를 만들어도 되며, 로컬 초기화 한 번에 분명히 동의한다. 먼저 확인한다: 아래 명령은 my-app이라는 새 디렉터리를 만든다. 아직 디스크에 쓰고 싶지 않으면 실행하지 마라.

설치 위치: 새 프로젝트를 둘 디렉터리에서 터미널을 열고, 위 부작용을 확인한 뒤 실행한다:

pnpm create vinext-app@latest my-app

낮은 위험 확인: 디렉터리가 나타난 뒤 프로젝트 설명과 설정을 읽기 전용으로 본다. 배포하지 말고 현재 저장소도 바꾸지 마라. 연 것이 기존 Next.js 프로젝트라면, 원문의 다음 문장은 지원 도구에서 migrate this project to vinext라고 말하는 것이다. 첫 시도에서는 「그 문장이 무엇을 바꿀지 되풀이하는」 데에서 멈추고, 도구가 파일을 바로 바꾸게 하지 마라.

성공 신호: 현재 디렉터리에 my-app이 있고, vinext로 만든 Next.js-on-Vite 프로젝트임을 알 수 있다. 명령이 실패하면 나타나지 않은 설치 프로그램을 보태지 말고 공식 페이지로 돌아가 원문을 확인한다.

사용 사례

사례 1: 처음부터 Cloudflare Workers를 향한 Vite판 Next.js 프로젝트를 만든다. 공식 명령은 pnpm create vinext-app@latest my-app다. 먼저 검사 가능한 로컬 디렉터리를 갖고 개발을 이어갈지 정하는 사람에게 맞다. 손대기 전에 같은 이름 폴더가 없는지 확인한다. 원문이 설치 건너뛰기나 배포 대상 변경을 쓰지 않았다면 그런 스위치가 있다고 가정하지 마라.

사례 2: 기존 Next.js 프로젝트를 vinext로 옮길지 평가한다. 원문은 지원되는 아무 도구에서 그 프로젝트를 열고 migrate this project to vinext라고 말하라고 한다. 처음에는 도구가 바꿀 파일을 나열하게 한 뒤, 확인한 다음에만 쓰기를 허용한다. 원문에는 이전되는 라우트, 데이터 가져오기, 미들웨어 목록이 없다. 따라서 「공식 구호로 평가를 시작」하는 데까지이며, 쓰이지 않은 호환표를 채우지 마라.

사용 경계

공식 주 경로는 pnpm create vinext-app@latest my-app다. 나타나지 않은 설치 프로그램을 주 경로에 넣지 마라. 배포 쪽에서 원문은 Cloudflare Workers만 첫 목표로 적으며, 이름 없는 플랫폼에 그대로 밀어 넣을 수 있음을 증명하지 않는다.

능력 경계는 분명하다: 오늘은 무게 있는 Next.js 앱을 꽤 지탱할 수 있지만, 모든 앱이나 프로덕션 부하의 플러그 앤 플레이 대체는 아직 아니다. 현재 사이트의 무변경 전환을 약속하는 데 쓰지 마라.

도구 목록은 Claude Code, OpenCode, Cursor, Codex 및 다른 많은 AI 코딩 도구이며 예시이지 닫힌 명단이 아니다. 이전 구호는 원문에 한 문장만 있다. 비밀, 환경 변수, 프로덕션 공개 단계는 원문이 펼치지 않았으니 채우지 마라. 공식 페이지는 https://github.com/cloudflare/vinext 도구가 제안하는 명령이 그 페이지와 다르면 그 페이지를 기준으로 한다.