[ Next.js ] Next15에 대해 알아보기.

 

 

 

2024년 10월 21일 Next15 버전이 공식 블로그에 업데이트되었다.

공식적으로 안정화되어 프로덕션에서 사용할 준비가 완료되었다고 한다.

 

 

이번 릴리즈는 RC1과 RC2의 업데이트를 기반으로 하며, 안정성에 중점을 두면서도 흥미로운 업데이트를 추가하였다고 한다.

10월 24일에 열린 Next.js Conf가 있었는데, 사전 신청하고 못 들어서 녹화본을 보고 다음에 그 내용에 대한 포스팅도 할 예정이다.

 

 

Next15의 사용 방법은 아래와 같다.

# 새로운 자동 업그레이드 CLI 사용
npx @next/codemod@canary upgrade latest

# ...또는 수동으로 업그레이드
npm install next@latest react@rc react-dom@rc

 

 

 

---

 

 

 

Next.js 15의 새로운 기능을 간략하게 소개하자면, 다음과 같다.

 

• @next/codemod CLI : 최신 Next.js 및 React 버전으로 쉽게 업그레이드할 수 있는 도구.
• Async Request APIs (Breaking) : 렌더링 및 캐싱 모델을 단순화하기 위한 점진적 단계로, 요청 데이터가 필요한 API를 비동기적으로 변경하였음. (호환성 깨짐)
• Caching Semantics (Breaking) : fetch요청, GET라우트 핸들러, 클라이언트 네비게이션이 기본적으로 캐싱되지 않도록 변경 (호환성 깨짐)
• React 19 Support : React 19, React Compiler(실험적), 하이드레이션 오류 개선을 지원.
• Turbopack Dev (Stable) : 성능 및 안정성이 향상되었음.(안정화)
• Static Indicator : 개발 중 정적 라우트를 시각적으로 표시하는 새로운 인디케이터 추가.
• unstable_after API (Experimental) : 응답 스트리밍이 완료된 후 코드를 실행할 수 있는 API. (실험적)
• instrumentation.js API (Stable) : 서버 라이프사이클 관찰을 위한 새로운 API. (안정화)
• Enhanced Forms (next/form) : HTML 폼을 클라이언트 사이드 네비게이션과 함께 향상함.
• next.config: next.config.ts에 대한 TypeScript 지원을 추가.
• Self-hosting Improvements : Cache-Control 헤더에 대한 제어를 강화.
• Server Actions Security: 추측할 수 없는 엔드포인트와 사용되지 않는 액션 제거를 통해 보안을 강화.
• Bundling External Packages (Stable): App 및 Pages 라우터에 대한 새로운 구성 옵션을 추가. (안정화)
• ESLint 9 Support: ESLint 9을 지원.
• Development and Build Performance: 빌드 시간 개선 및 빠른 새로 고침 속도가 향상.

 

 

---

 

 

 

@next/codemod CLI를 통한 원활한 업그레이드

모든 주요 Next.js 릴리즈에는 호환성 깨짐 변경 사항을 자동으로 업그레이드할 수 있도록 codemod(자동 코드 변환)를 포함하고 있다. 업그레이드를 더욱 원활하게 하기 위해 향상된 codemod CLI를 출시하였다.

npx @next/codemod@canary upgrade latest

 

 

 

 

 

Async Request APIs (Breaking) 비동기 API 요청 (호환성 깨짐)

전통적인 서버 사이드 렌더링에서는 서버가 요청을 기다린 후 콘텐츠를 렌더링 한다. 그러나 모든 컴포넌트가 요청별 데이터에 의존하는 것은 아니므로, 요청을 기다릴 필요 없이 렌더링 할 수 있다. 이런 최적화를 위해 요청별 데이터에 의존하는 API(headers, cookies, params, searchParams 등)를 비동기적으로 전환하고 있다.

import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');

  // ...
}

 

이 변경 사항은 다음 API에 영향을 미친다 :

• cookies
• headers
• draftMode
• params in layout.js, page.js, route.js, default.js, generateMetadata, and generateViewport
• searchParams in page.js

더 쉬운 마이그레이션을 위해, 이러한 API는 일시적으로 동기적으로 접근할 수 있지만 다음 주요 버전까지 개발 및 프로덕션에서 경고를 표시한다. 마이그레이션을 자동화하기 위한 codemod가 제공된다.

 

 

 

 

 

Caching Semantics (Breaking) 캐싱 방식 (호환성 깨짐)

Next.js 15에서는 GET경로 핸들러와 클라이언트 라우터의 기본 캐싱 동작이 업데이트되었다.

 

GET Router 핸들러

Next.js 13에서는 GET요청이 기본적으로 캐시 되었다. 즉, 동일한 요청이 이루어질 때 Next.js가 이전 응답을 저장하고 재사용하여 불필요한 네트워크 호출을 방지하였다. 하지만 Next.js 15에서는 더 이상 기본적으로 GET 요청을 캐시 하지 않는다. 기본적으로 동적 데이터를 제공하고 새 요청마다 최신 데이터를 가져오도록 설계되었다.

 

만약 캐싱이 필요한 경우 export const dynamic = 'force-static' 을 사용하여 GET요청에 대해 강제적으로 정적 캐시를 활성화할 수 있다. 이를 통해 특정 GET 경로가 정적으로 캐시 되도록 보장할 수 있으며, 이렇게 설정된 경로는 일정 시간 동안 고정된 데이터를 제공한다.

 

클라이언트 라우터

Next.js 15에서는 클라이언트 라우터가 기본적으로 페이지 컴포넌트를 캐시 하지 않는다.

이전 버전에서는 페이지가 캐시되어 페이지 전환 시 더 빠르게 로드되었지만, 이제는 페이지가 항상 최신 상태로 유지된다. 즉, 페이지 컴포넌트가 새로운 데이터를 즉시 반영하여 렌더링 된다.

 

기존의 캐싱 동작을 유지하고 싶다면 staleTimes 설정을 사용하여 페이지 캐싱을 활성화할 수 있다.

staleTimes를 적절히 설정하면 페이지가 일정 시간 동안 캐시된 상태로 유지되며 사용자가 해당 페이지로 돌아왔을 때 캐시된 데이터를 재사용하여 성능을 최적화할 수 있다.

 

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
export default nextConfig;

 

 

 

 

 

React 19

Next.js 15릴리즈의 일환으로 다가오는 React 19 릴리즈에 맞추기로 결정하였다고 한다. 15에서는 App Router가 React 19 RC를 사용하며, Pages Router에 대해서는 커뮤니티 피드백을 기반으로 React 18과의 하위 호환성을 도입했다. Pages Router를 사용하는 경우, 준비가 되었을 때 React 19로 업그레이드할 수 있다.

 

React 19는 아직 RC(Release Candidate) 단계에 있지만, 실제 애플리케이션에 대한 광범위한 테스트와 React 팀과의 긴밀한 협업을 통해 그 안정성에 대한 확신을 얻었다고 한다. 핵심적인 변경 사항들은 충분히 테스트되었고 기존 App Router 사용자들에게 영향을 미치지 않는다고 한다. 프로젝트가 React 19 GA(General Availability)에 완전히 준비될 수 있도록 Next.js 15를 지금 안정 버전으로 출시하기로 결정하였다고 한다.

 

전환을 원활하게 할 수 있도록 codemod와 자동화 도구를 제공하여 마이그레이션 과정을 지원한다.

 

 

 

 

---

 

 

 

몇 가지 주요 사항들을 알아보았다. 매번 느끼는 거지만, 프론트엔드 생태계는 항상 빠르게 변화하는 것 같다.

Next.js 13 버전이 2022년 10월 25일에 출시되었고, 14 버전이 2023년 10월 26일, 15 버전이 2024년 10월 21일로 약 1년 간격으로 출시되고 있다. 

 

React.js 는 16 버전이 2017년 9월 26일, 17 버전이 2020년 10월 20일, 18 버전이 2022년 3월 29일, 19 버전이 2024년 4월 25일(RC)이다. 

 

훌륭한 프론트엔드 개발자로 성장하기 위해 안주하지 않고, 끊임없이 노력하고 성장하는 사람이 되어야겠다.

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

next-15-blog

next15 업그레이드 가이드

React 2014 conf