Next.js 15.5 출시 with Next.js 16 예고

Next.js 15.5 출시가 되었고 메이저 업데이트는 아니지만 Next.js 16에 대한 예고가 있어 내용을 파악할 겸 정리해 보았다

---

주요 기능 업데이트

1. Turbopack 빌드 (베타)

이제 next build --turbopack 명령어로 프로덕션 빌드에서 Turbopack을 베타 버전으로 사용할 수 있고 주요 변경 사항은 아래와 같다.

• 성능 향상: 멀티코어 CPU를 적극 활용, 웹팩 대비 빌드 속도를 2배에서 최대 5배까지 단축.
• 프로덕션 안정성: 빌드된 사이트는 웹팩과 비교 시 비슷하거나 더 적은 JS/CSS 번들을 생성하며, 웹 성능 지표(FCP, LCP, TTFB)도 동등하거나 더 나은 결과를 보였음.

하지만 아래와 같은 사항을 고려해서 사용해야 한다고 한다

• 소규모 프로젝트: 영속적 캐싱 기능이 아직 개발 중이라 작은 프로젝트에선 빌드 시간 개선이 미미할 수 있음.
• 번들 최적화: 일부 경우 웹팩이 더 최적화된 번들을 생성하며, 안정 버전 출시 전까지 개선될 예정임.
• CSS 순서: 처리 방식 차이로 CSS 파일 순서가 달라져 시각적 차이가 발생할 수 있음.

2. Node.js 미들웨어 (안정 버전)

Next.js를 사용하다 보면 middleware에서는 에지 런타임만 사용 가능한 건 엄청나게 큰 제약이다 특히나 firebase auth 같이 middleware에서 활용되면 좋은 라이브러리들이 분명히 존재하는데 이는 여태 엣지 런타임에서 활용하기 어렵고 가능하기야 하지만 매우 까다로웠다.

아무튼 드디어 미들웨어의 Node.js 런타임이 실험 단계를 지나 안정 버전으로 전환되었다.

• 기능 확장: Edge 런타임의 제약에서 벗어나, 미들웨어에서 fs, crypto 같은 Node.js API와 npm 패키지를 자유롭게 사용할 수 있게 됨.
• 적용 방법: middleware.ts 파일에 export const config = { runtime: 'nodejs' }; 와 같이 설정하여 사용함.
• 향후 계획: 커뮤니티 피드백에 따라 Next.js 17부터 Node.js 런타임을 기본값으로 설정하는 것을 고려 중.

3. TypeScript 개선 사항

• App 라우터의 타입 안전성이 대폭 강화되었으며, 모든 기능은 Turbopack과 완벽하게 호환됨.
• 타입 지정 라우트 (Typed Routes) 안정화: next.config.js의 typedRoutes: true 옵션이 안정화됨. <Link> 컴포넌트의 href에 잘못된 경로를 입력하면 컴파일 시점에 에러를 감지.
• 라우트 Props 헬퍼: PageProps, LayoutProps 같은 타입이 전역으로 자동 생성되어 import 없이 사용 가능. 동적/병렬 라우트의 파라미터까지 완벽하게 타이핑됨.
• next typegen 명령어 추가: next dev나 next build 없이 수동으로 라우트 타입을 생성하는 명령어가 추가됨. CI 환경에서 타입 검증 시 유용함.

4. next lint 명령어 사용 중단 (Deprecation)

• next lint 명령어는 Next.js 16에서 제거될 예정이며, 15.5 버전부터 사용 시 경고 메시지가 표시.
• 새로운 방식: ESLint나 Biome 같은 린터를 직접 호출하는 방식으로 전환.
• 투명성 강화: ESLint 선택 시 eslint.config.mjs 설정 파일이 자동으로 생성되어 규칙을 명확하게 관리할 수 있음.
• 자동 마이그레이션: 기존 프로젝트는 아래 codemod 명령어로 쉽게 전환 가능.

  npx @next/codemod@latest next-lint-to-eslint-cli .

---

Next.js 16 변경 예고 (사용 중단 예정 기능)

Next.js 16 출시가 얼마 남지 않은 것으로 보이고, Next.js 15.5 버전부터는 Next.js 16에서 제거될 기능들에 대한 경고가 표시되니 이를 활용해서 미리 대응하여 원활한 업그레이드를 준비하는 것이 좋아 보인다.

• next/link의 legacyBehavior 속성 제거
  • 호환성을 위해 제공되던 속성임. legacyBehavior 속성과 그 자식인 <a> 태그를 제거하고 <Link> 컴포넌트를 직접 사용해야 한다.
• AMP 지원 중단
  • AMP 사용률 감소로 관련 기능이 모두 제거됨. export const config = { amp: true } 설정, useAmp 훅 등 모든 AMP 관련 코드를 제거해야 한다.
• next/image quality 설정 변경
  • <Image> 컴포넌트의 quality 속성값을 75가 아닌 다른 값으로 사용하려면, next.config.js의 images.qualities 배열에 해당 값을 명시적으로 추가해야 한다.
• next/image 로컬 이미지 경로 패턴
  • 로컬 이미지 src에 쿼리 문자열(예: "/photo.jpg? v=1")을 사용하려면, next.config.js의 images.localPatterns에 허용할 경로 패턴을 명시적으로 설정해야 한다.