Next.js 15 RC 발표

Next 15 Release Candidate (RC) 발표

Next.js 15 RC가 나왔다고 한다. 아직 정식 출시는 이전이고 출시 전에 최신 기능을 테스트할 수 있는 기회를 준다고 하는 것 같은데, 내용을 간단하게 확인해보려고 한다.

주요 기능 업데이트:

• React: React 19 RC 지원, React Compiler(실험적), 하이드레이션 오류 개선
• 캐싱: 기본적으로 fetch 요청, GET 라우트 핸들러, 클라이언트 네비게이션이 캐시되지 않도록 변경
• 부분 사전 렌더링(실험적): 점진적 적용을 위한 새로운 레이아웃 및 페이지 설정 옵션
• next/after(실험적): 응답 스트리밍 후 코드를 실행할 수 있는 새로운 API
• create-next-app: 로컬 개발에서 Turbopack 활성화 플래그와 업데이트된 디자인
• 외부 패키지 번들링(안정적): 앱 및 페이지 라우터에 대한 새로운 설정 옵션

업데이트 세부 사항:

React 19 RC

Next.js 15 RC는 React 19 RC를 지원하며, 새로운 클라이언트 및 서버 기능을 제공한다고 한다. 일부 서드파티 라이브러리는 아직 React 19와 호환되지 않을 수 있다고 한다.

React Compiler (실험적)

React 팀에서 만든 새로운 실험적 컴파일러로, Next.js 15에서는 Babel 플러그인을 통해 지원된다고 한다.

설치 명령:

npm install babel-plugin-react-compiler

next.config.js 파일 설정:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

하이드레이션 오류 개선

Next.js 15는 하이드레이션 오류 메시지를 개선해서 소스 코드와 해결 방법을 보여준다고 한다.

캐싱 업데이트

Next.js 15에서는 fetch 요청, GET 라우트 핸들러, 클라이언트 라우터 캐시가 기본적으로 캐시되지 않도록 변경되었다고 한다.

부분 사전 렌더링 (PPR) (실험적)

PPR을 통해 정적 HTML 셸을 즉시 제공하고, 동적 부분을 동일한 HTTP 요청에서 스트리밍한다고 한다. 이 기능은 experimental_ppr 옵션을 통해 레이아웃 및 페이지에 대해 점진적으로 적용할 수 있다고 한다.

next/after (실험적)

응답이 완료된 후에 코드를 실행할 수 있는 새로운 API라고 한다. 예를 들어, 로깅이나 분석 작업을 처리할 수 있다고 한다.

사용 예:

import { unstable_after as after } from 'next/server';

import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => {
    log();
  });

  return <>{children}</>;
}

create-next-app 업데이트

새로운 디자인과 함께 Turbopack을 활성화할 수 있는 옵션이 추가되었다고 한다. 또한, --empty 플래그를 사용해 최소한의 "hello world" 페이지를 생성할 수 있다고 한다.

설치 명령:

npx create-next-app@rc --turbo

npx create-next-app@rc --empty

외부 패키지 번들링 최적화

앱 라우터와 페이지 라우터 모두에서 외부 패키지를 자동으로 번들링하는 새로운 옵션이 추가되었다고 한다.

마무리

아직 디테일한 내용들을 전부 확인해보진 못했지만 전체적인 내용을 다루어 봤고 큰 업데이트인 만큼 피쳐별로 하나씩 자세하게 소스코드를 분석하면서 알아보고 내용을 공유할 계획이다. (간단하게 살펴봤을 땐 next/after가 좀 흥미로운 피쳐인 것 같다)