Vercel Blog

Next.js는 React, Webpack, Babel을 기반으로 구축된 서버 사이드 렌더링(SSR) 중심의 웹 애플리케이션 프레임워크입니다. 파일 시스템을 API로 활용하는 제로 설정 방식과 컴포넌트 생명주기를 통한 효율적인 데이터 처리를 통해 개발자에게 강력한 유연성과 성능 최적화 기능을 제공합니다.

Vercel이 Next.js 2.0을 발표하며 커스텀 서버를 통한 프로그래밍 방식의 API 제어와 React 버전 독립성을 제공하여 프레임워크의 유연성을 대폭 강화했습니다. 또한, styled-jsx 도입과 링크 프리페칭 기능을 통해 개발 편의성과 웹 성능 최적화를 동시에 달성했습니다.

Next.js 3.0 베타 버전은 next export 명령어를 통해 별도의 서버 운영 없이도 실행 가능한 독립형 정적 웹사이트 빌드를 지원합니다. 또한, TC39 동적 임포트 표준을 활용한 next/dynamic 기능을 통해 클라이언트 측 번들 크기를 줄이면서도 서버 사이드 렌더링의 이점을 유지하는 고도화된 코드 분할 기술을 제공합니다.

Vercel은 Next.js 3.0의 정식 출시를 발표하며, 정적 내보내기(Static Export) 기능과 TC39 표준을 따르는 동적 임포트 지원을 핵심 업데이트로 공개했습니다. 이를 통해 개발자는 코드 분할을 더욱 효율적으로 관리하고 웹 애플리케이션의 초기 로딩 속도를 극대화할 수 있게 되었습니다.

Next.js 4는 React 16 지원과 함께 dynamic styles를 지원하는 styled-jsx 2로 업그레이드되었습니다. 이번 업데이트를 통해 SSR 성능이 기존 대비 2.6배 빨라졌으며, CSS-in-JS 라이브러리 중 가장 빠른 스타일링 성능을 제공합니다.

Vercel은 Next.js 5의 핵심 목표로 기능 확장보다는 대규모 프로젝트와 팀을 위한 '확장성(Scalability)'에 집중하겠다고 밝혔습니다. 이를 위해 개발자들이 최신 실험적 기능을 미리 테스트할 수 있는 카나리 채널을 도입했으며, 컴파일 속도 향상과 멀티 앱 지원 등을 로드맵으로 제시했습니다.

Next.js 5.0은 Webpack을 서버와 클라이언트 양측에서 동일하게 사용할 수 있는 유니버셜 파이프라인을 구축하여 강력한 확장성을 제공합니다. 이를 통해 CSS, SASS 등 다양한 로더를 손쉽게 도입할 수 있으며, 플러그인 생태계 확장을 위한 기반을 마련했습니다.

Next.js 5.1은 페이지 해석 속도를 기존 대비 102배 높이는 혁신적인 성능 향상을 이루었으며, 클라이언트와 서버 환경을 아우르는 새로운 환경 변수 설정 방식을 도입했습니다. 또한 에러 처리 로직의 전면 재설계와 단계별(phase) 설정 기능을 통해 개발 및 운영 효율성을 극대화했습니다.

Vercel은 설정 없는 정적 내보내기와 앱 전역 레이아웃 관리가 가능해진 Next.js 6를 공식 출시했습니다. 이번 업데이트는 Babel 7 지원과 _app.js 도입을 통해 개발자 경험(DX)과 애플리케이션의 확장성을 동시에 개선하는 데 중점을 두었습니다.

Next.js 6.1은 개발 및 운영 환경 간의 차이를 줄이기 위해 hot reloading 방식을 개선하고, 기존의 deprecated된 url 속성을 withRouter로 전환하기 위한 codemod 도구를 도입했습니다. 또한 프로젝트 구조 최적화와 함께 nextjs.org 사이트의 오픈 소스화를 발표하며 생태계 확장을 꾀하고 있습니다.

Verc록은 새로운 'Auto Job Cancellation' 기능을 통해 빌드가 진행되는 동안 새로운 푸시가 발생하면 기존 작업을 즉시 중단하고 최신 커밋을 우선적으로 빌드합니다. 이를 통해 개발자는 항상 가장 최신의 배포 URL을 빠르게 확인할 수 있으며, 불필요한 빌드 리소스 소모를 줄일 수 있습니다.

Vercel은 Let's Encrypt를 통해 SSL 인증서의 발급부터 갱신까지 전 과정을 자동화하여 개발자가 보안 설정에 신경 쓰지 않고 서비스 로직에만 집중할 수 있게 합니다. 특히 GitHub/GitLab 연동을 통해 프리뷰 배상 시에도 HTTPS가 적용된 개별 스테이징 URL을 즉시 제공합니다.

Vercel이 로컬 환경에서 프론트엔드와 서버리스 함수를 동시에 실행할 수 있는 'vercel dev' 명령어를 발표했습니다. 이를 통해 개발자는 복잡한 종속성 설치나 포트 설정 없이 단일 명령어로 프로덕션과 유사한 개발 환경을 구축하고 실시간 코드 반영(Hot-reloading)을 경험할 수 있습니다.

Vercel의 새로운 기능인 SPR은 'stale-while-revalidate' 헤더를 활용해 정적 페이지의 성능을 유지하면서 백그라운드에서 동적 데이터를 비동기적으로 업데이트합니다. 이를 통해 개발자는 전체 빌드 과정 없이도 CMS 등을 통해 실시간으로 콘텐츠를 변경할 수 있으며, 서버 부하와 비용을 획기적으로 절감할 수 있습니다.

Vercel CLI가 드디어 Windows 환경을 공식 지원하게 되어, Command Prompt부터 WSL까지 다양한 터미널에서 vercel dev를 실행할 수 있습니다. 이를 통해 Node.js 기반의 개발자들은 운영체제 제약 없이 동일한 로컬 개발 환경을 구축할 수 있게 되었습니다.

Vercel은 최근 '통합(Integrations)'을 주제로 한 첫 해커톤 결과를 발표하며, Storyblok, Image Optimizer, UptimeRobot 등 개발 효율성을 높이는 우수 프로젝트들을 선정했습니다. 이번 행사는 전 세계 2상 이상의 참가자가 참여한 온라인 기반의 글로벌 이벤트로 진행되었습니다.

Vercel은 Node.js 서버리스 함수에서 사용할 수 있는 6가지 기본 헬퍼(request.query, request.body 등)를 새롭게 도입했습니다. 이를 통해 개발자는 별도의 라이브러리 없이도 요청 데이터를 쉽게 파싱할 수 있으며, 기존 Express.js 대비 향상된 성능을 경험할 수 있습니다.

Vercel이 새로운 서버리스 Node.js 함수와 Next.js 애플리케이션에 대해 Node.js 10 지원을 시작했습니다. 개발자는 package.json의 engines 필드 수정을 통해 BigInt 및 성능이 향상된 V8 엔진의 이점을 즉시 누릴 수 있습니다.

Vercel은 Git 기반의 자동 배포를 넘어, HTTP POST 요청을 통해 임의의 외부 이벤트를 배포 트리거로 사용할 수 있는 Deploy Hooks 기능을 발표했습니다. 이를 통해 개발자는 CMS 콘텐츠 업데이트나 스케줄링된 작업 등에 맞춰 웹사이트를 자동으로 재빌드하고 즉시 배포할 수 있습니다.

Vercel은 기존의 vercel.json 작성 없이도 Next.js, Gatsby 등 다양한 프레임워크를 자동으로 인식하여 배포하는 'Zero Config' 방식을 도입했습니다. 이를 통해 프론트엔드뿐만 아니라 API 디렉토리를 통한 서버리스 함수 배포까지 설정 과정 없이 자동화하여 개발 생산성을 극대화합니다.

Vercel은 GitHub 및 GitLab과의 연동을 통해 PR/MR의 변경 사항을 시각적으로 분석해 주는 'Deploy Summary' 통합 기능을 출시했습니다. 이 기능은 변경된 페이지의 스크린샷, 배포 URL, 커밋 SHA 등을 리뷰어에게 즉시 제공하여 프론트엔드 코드 리뷰 프로세스를 획기적으로 단축합니다.

Vercel이 모든 서브도메인을 즉시 캡처하여 배포할 수 있는 '와일드카드 도메인' 기능을 도입했습니다. 이를 통해 개발자는 사용자별로 고유한 서브도메인을 할당하는 맞춤형 서비스(예: 워크스페이스, 개인 프로필)를 추가적인 인프라 설정 없이 매우 간편하게 구현할 수 있습니다.

Vercel은 대시보드의 프로덕션 배포 강조 및 설정 메뉴의 접근성 개선을 통해 사용자 인터페이스를 고도화했습니다. 또한, 더 강력한 CPU 도입으로 빌드 성능을 높이고 배포 요약의 필터링 기능을 추가하여 개발 워크플로우의 효율성을 증대시켰습니다.

Vercel은 기업 고객이 회계 부서의 요구사항에 맞춰 송장 정보를 맞춤 설정할 수 있는 새로운 빌링(Billing) 기능을 도입했습니다. 사용자는 이제 송장 수신 이메일, 주소, 언어, 사업자 등록 번호(Tax ID) 등을 직접 관리하여 세무 증빙의 어려움을 해결할 수 있습니다.