Next.js 13.1, 앱 디렉토리 안정화 및 Turbopack 성능 UP!

app 디렉토리의 안정성 및 성능이 개선되었으며, TypeScript 플러그인 지원이 추가됨

Turbopack에서 Tailwind CSS, next/image 등 다양한 기능 지원

Edge Runtime이 API Routes에서 안정적으로 사용 가능하며, 번들 사이즈 감소 효과

app 디렉토리의 구조적 개선

app 디렉토리는 기존 pages 디렉토리와 병행 사용 가능하며, 레이아웃 및 컴포넌트의 통합 관리를 지원한다. 구체적으로, 불필요한 HTML 요소 제거를 통해 렌더링 성능을 향상시켰다. 따라서 TypeScript 플러그인을 통해 개발 편의성을 높였다.

Turbopack의 성능 향상 및 기능 확장

Next.js 13.1은 Turbopack의 Tailwind CSS 및 CSS Modules 지원을 강화했다. HMR(Hot Module Replacement) 속도 개선을 통해 개발 생산성을 높였다. 반면, Vite와의 벤치마크 비교를 통해 Turbopack의 성능 개선 방향성을 제시했다.

Edge Runtime의 안정화 및 활용

Edge Runtime은 API Routes에서 안정적으로 사용 가능하며, Vercel Edge Functions를 통해 글로벌 배포를 지원한다. 구체적으로, Middleware에서 요청 헤더 설정 및 응답 반환 기능을 제공한다. 따라서 API 응답 시간 단축 및 유연한 라우팅 제어가 가능해졌다.