🔗 Next.js 15 RC (opens in a new tab)

🗓️ 번역 날짜: 2024.07.30

🧚 번역한 크루: 러기(박정우)

Next.js 15 RC

Next.js 15 Release Candidate (RC)가 이제 사용할 수 있습니다. 이 초기 버전을 통해 다가오는 안정화 릴리스 전에 최신 기능을 테스트할 수 있습니다.

• React: React 19 RC 지원, React 컴파일러(실험적), 하이드레이션 오류 개선
• 캐싱: fetch 요청, GET 라우트 핸들러, 클라이언트 탐색이 기본적으로 캐시되지 않음
• 부분 프리렌더링(실험): 점진적 채택을 위한 새로운 레이아웃 및 페이지 구성 옵션
• next/after(실험): 응답이 스트리밍된 후 코드를 실행하는 새로운 API
• create-next-app: 로컬 개발에서 Turbopack을 활성화하는 새 플래그와 업데이트된 디자인
• 외부 패키지 번들링(안정): App 및 Pages 라우터를 위한 새로운 구성 옵션

오늘 Next.js 15 RC를 시도해보세요:

 
npm install next@rc react@rc react-dom@rc

참고: Next.js 15 RC 문서는 Next.js 15 GA가 발표될 때까지 rc.nextjs.org/docs에서 볼 수 있습니다.

React 19 RC

Next.js 앱 라우터는 프레임워크용 React canary channel을 기반으로 구축되어, 개발자들이 React 19 출시 전에 이러한 새로운 React API를 사용하고 피드백을 제공할 수 있도록 합니다.

Next.js 15 RC는 이제 React 19 RC를 지원하며, 이는 Actions와 같은 클라이언트 및 서버의 새로운 기능을 포함합니다.

자세한 내용을 알아보려면 Next.js 15 업그레이드 가이드, React 19 업그레이드 가이드, 그리고 React Conf Keynote를 참조하세요.

참고: 일부 타사 라이브러리는 아직 React 19와 호환되지 않을 수 있습니다.

React 컴파일러(실험)

React 컴파일러는 Meta의 React 팀이 만든 새로운 실험적 컴파일러입니다. 이 컴파일러는 JavaScript의 의미와 React의 규칙을 깊이 이해하여 코드를 자동으로 최적화할 수 있습니다. 이 컴파일러는 useMemo와 useCallback과 같은 API를 통해 개발자가 해야 할 수동 메모화를 줄여 코드가 더 간단하고 유지 관리가 쉬워지며 오류가 적어지게 합니다.

Next.js 15에서는 React 컴파일러에 대한 지원을 추가했습니다.

babel-plugin-react-compiler를 설치하세요:

터미널

npm install babel-plugin-react-compiler

그런 다음 next.config.js에 experimental.reactCompiler 옵션을 추가하세요:

next.config.ts

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

선택적으로, 컴파일러를 "opt-in" 모드로 실행하도록 구성할 수 있습니다:

next.config.ts

typescript코드 복사
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;
 

참고: React 컴파일러는 현재 Babel 플러그인을 통해 Next.js에서만 사용할 수 있으며, 이는 빌드 시간을 느리게 할 수 있습니다.

React 컴파일러와 사용 가능한 Next.js 구성 옵션에 대해 자세히 알아보세요.

Hydration 오류 개선

Next.js 14.1에서는 오류 메시지와 하이드레이션 오류가 개선되었습니다. Next.js 15는 여기에 더해 향상된 하이드레이션 오류 뷰를 추가합니다. 이제 하이드레이션 오류는 오류의 소스 코드와 문제 해결에 대한 제안을 표시합니다.

예를 들어, 다음은 Next.js 14.1의 이전 하이드레이션 오류 메시지입니다:

하이드레이션 오류 메시지 in Next.js 14.1

Next.js 15 RC에서는 이를 다음과 같이 개선했습니다:

하이드레이션 오류 메시지 improved in Next.js 15 RC

캐싱 업데이트

Next.js 앱 라우터는 의견이 반영된 캐싱 기본값으로 출시되었습니다. 이는 기본적으로 가장 성능이 좋은 옵션을 제공하며 필요한 경우 옵트아웃할 수 있는 기능을 제공합니다.

귀하의 피드백을 기반으로 우리는 캐싱 휴리스틱과 그것이 부분 프리렌더링(PPR) 및 fetch를 사용하는 타사 라이브러리와 어떻게 상호 작용할지를 재평가했습니다.

Next.js 15에서는 fetch 요청, GET 라우트 핸들러 및 클라이언트 라우터 캐시에 대한 캐싱 기본값을 캐시에서 기본적으로 제외하도록 변경합니다. 이전 동작을 유지하려면 계속해서 캐싱을 옵트인할 수 있습니다.

우리는 앞으로 몇 달 동안 Next.js에서 캐싱을 계속 개선할 것이며 Next.js 15 GA 발표에서 더 많은 세부 정보를 공유할 것입니다.

fetch 요청은 더 이상 기본적으로 캐시되지 않음

Next.js는 Web fetch API 캐시 옵션을 사용하여 서버 사이드 fetch 요청이 프레임워크의 지속적인 HTTP 캐시와 어떻게 상호 작용할지를 구성합니다:

fetch("https://...", { cache: "force-cache" | "no-store" });

• no-store: 매 요청마다 원격 서버에서 리소스를 가져오며 캐시를 업데이트하지 않음
• force-cache: 캐시에 리소스가 있으면 캐시에서, 그렇지 않으면 원격 서버에서 리소스를 가져오고 캐시를 업데이트

Next.js 14에서는 dynamic 함수 또는 dynamic 구성 옵션이 사용되지 않는 한 기본적으로 force-cache가 사용되었습니다.

Next.js 15에서는 캐시 옵션이 제공되지 않으면 기본적으로 no-store가 사용됩니다. 이는 fetch 요청이 기본적으로 캐시되지 않음을 의미합니다.

여전히 fetch 요청에 대해 캐싱을 옵트인할 수 있습니다:

• 단일 fetch 호출에서 캐시 옵션을 force-cache로 설정
• 단일 라우트에 대해 dynamic 라우트 구성 옵션을 'force-static'으로 설정
• 레이아웃 또는 페이지의 모든 fetch 요청을 기본적으로 force-cache를 사용하도록 fetchCache 라우트 구성 옵션을 'default-cache'로 설정하여 캐시 옵션을 명시적으로 지정하지 않은 경우 모두 무시
• GET 라우트 핸들러는 더 이상 기본적으로 캐시되지 않음

Next 14에서는 dynamic 함수 또는 dynamic 구성 옵션을 사용하지 않는 한 GET HTTP 메서드를 사용하는 라우트 핸들러가 기본적으로 캐시되었습니다. Next.js 15에서는 GET 함수가 기본적으로 캐시되지 않습니다.

여전히 static 라우트 구성 옵션을 사용하여 캐싱을 옵트인할 수 있습니다(ex. export dynamic = 'force-static').

sitemap.ts, opengraph-image.tsx, icon.tsx와 같은 특수 라우트 핸들러 및 기타 메타데이터 파일은 dynamic 함수 또는 dynamic 구성 옵션을 사용하지 않는 한 기본적으로 정적 상태로 유지됩니다.

클라이언트 라우터 캐시는 기본적으로 페이지 구성 요소를 캐시하지 않음

Next.js 14.2.0에서는 라우터 캐시의 사용자 정의 구성을 허용하기 위해 실험적 staleTimes 플래그를 도입했습니다.

Next.js 15에서는 이 플래그가 여전히 접근 가능하지만 페이지 세그먼트에 대한 staleTime을 0으로 설정하여 기본 동작을 변경하고 있습니다. 이는 앱을 탐색할 때 클라이언트가 탐색의 일부로 활성화되는 페이지 구성 요소에서 항상 최신 데이터를 반영함을 의미합니다. 그러나 중요한 동작은 여전히 변경되지 않습니다:

공유 레이아웃 데이터는 부분 렌더링을 계속 지원하기 위해 서버에서 다시 가져오지 않습니다. 이전/다음 탐색은 여전히 캐시에서 복원되어 브라우저가 스크롤 위치를 복원할 수 있도록 합니다. Loading.js는 여전히 5분 동안 캐시됩니다(또는 staleTimes.static 구성의 값). 이전 클라이언트 라우터 캐시 동작을 옵트인하려면 다음 구성을 설정하세요:

// next.config.ts
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

부분 프리렌더링의 점진적 채택(실험적)

Next.js 14에서는 부분 프리렌더링(PPR)을 도입했습니다. 이는 같은 페이지에서 정적 렌더링과 동적 렌더링을 결합하는 최적화입니다.

Next.js는 현재 cookies(), headers() 및 캐시되지 않은 데이터 요청과 같은 동적 함수를 사용하지 않는 한 정적 렌더링을 기본값으로 합니다. 이러한 API는 전체 라우트를 동적 렌더링으로 옵트인합니다. PPR을 사용하면 동적 UI를 Suspense 경계에 래핑할 수 있습니다. 새로운 요청이 들어오면 Next.js는 정적 HTML 쉘을 즉시 제공한 다음 동일한 HTTP 요청에서 동적 부분을 렌더링하고 스트리밍합니다.

점진적 채택을 허용하기 위해 특정 레이아웃 및 페이지를 PPR에 옵트인할 수 있는 experimental_ppr 라우트 구성 옵션을 추가했습니다:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default