Next.js 14.1 Release

https://nextjs.org/

Next.js 14.1 버전이 릴리즈 되었습니다. 

해당 버전에 대한 설명을 한글로 번역하여 공유드립니다. ( chat-gpt ) 

 

---

1. 자체 호스팅 개선: 새 문서 및 사용자 정의 캐시 핸들러

Next.js를 Node.js 서버, Docker 컨테이너 또는 정적 익스포트와 함께 자체 호스팅하는 방법에 대한 향상된 명확성에 대한 피드백을 들었습니다. 이에 따라 다음과 같은 항목에 대한 자체 호스팅 문서를 개편했습니다

• 런타임 환경 변수
• ISR을 위한 사용자 정의 캐시 구성
• 사용자 정의 이미지 최적화
• 미들웨어

Next.js 14.1에서는 증분 정적 재생성 및 앱 라우터의 더 세분화된 데이터 캐시에 대한 사용자 정의 캐시 핸들러를 안정화했습니다

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // disable default in-memory caching
};

이 설정을 사용하면 쿠버네티스와 같은 컨테이너 오케스트레이션 플랫폼을 사용할 때 중요합니다.

각 팟은 캐시의 복사본을 가지게 되는데, 사용자 정의 캐시 핸들러를 사용하면 Next.js 애플리케이션을 호스팅하는 모든 팟 간 일관성을 보장할 수 있습니다.

예를 들어 캐시된 값을 Redis나 Memcached와 같은 곳에 저장할 수 있습니다.

2. 터보팩 개선: 다음 개발을 위한 5,600개의 테스트 통과 --turbo

신뢰성

저희는 계속해서 로컬 Next.js 개발의 신뢰성과 성능에 중점을 두고 있습니다

• 신뢰성: Turbopack가 전체 Next.js 개발 테스트 스위트를 통과하고 Vercel의 응용 프로그램에서 Dogfooding 중입니다.
• 성능: Turbopack 초기 컴파일 시간 및 Fast Refresh 시간을 개선 중입니다.
• 메모리 사용: Turbopack 메모리 사용량을 개선 중입니다.

다음 릴리스에서 next dev --turbo를 안정화하고 여전히 선택 사항으로 유지할 계획입니다.

Turbopack이 적용된 Next.js는 현재 5,600개의 개발 테스트를 통과하고 있습니다(94%), 이는 마지막 업데이트 이후 600개 더 향상된 결과입니다. 진행 상황은 areweturboyet.com에서 확인하실 수 있습니다.

Vercel의 모든 Next.js 응용 프로그램, vercel.com 및 v0.dev를 포함하여 계속해서 next dev --turbo를 Dogfooding하고 있습니다. 이러한 응용 프로그램에서 작업하는 엔지니어들은 Turbopack을 매일 사용하고 있습니다.

Turbopack을 사용하는 매우 큰 Next.js 응용 프로그램에 대한 몇 가지 문제를 찾아 수정했습니다. 이러한 수정 사항에 대해 우리는 Next.js의 기존 개발 테스트 스위트에 새로운 테스트를 추가했습니다.

성능

vercel.com이라는 큰 Next.js 응용 프로그램에서는 다음과 같은 결과를 관찰했습니다

• 로컬 서버 시작이 최대 76.7% 빨라짐
• Fast Refresh를 사용한 코드 업데이트가 최대 96.3% 빨라짐
• 캐싱 없이 초기 라우트 컴파일이 최대 45.8% 빨라짐 (Turbopack은 아직 디스크 캐싱을 지원하지 않음) v0.dev에서는 React Client Components가 Turbopack에서 어떻게 발견되고 번들링되는지 최적화할 수 있는 기회를 발견했으며, 이로 인해 초기 컴파일 시간이 최대 61.5% 빨라졌습니다. 이 성능 향상은 vercel.com에서도 관찰되었습니다.

향후 개선사항 Turbopack은 현재 증분 컴파일 시간을 개선하기 위한 인메모리 캐싱을 사용하고 있습니다.

그러나 현재 캐시는 Next.js 개발 서버를 다시 시작할 때 유지되지 않습니다. Turbopack 성능의 다음 큰 단계는 디스크 캐싱으로, 이를 통해 개발 서버를 다시 시작할 때 캐시를 보존할 수 있게 될 것입니다.

3. 개발자 경험(DX) 개선 - 개선된 오류 메시지, pushState 및 replaceState 지원

개선된 오류 메시지 및 Fast Refresh

로컬 개발 환경에서 명확한 오류 메시지가 얼마나 중요한지 알고 있습니다. next dev를 실행할 때 표시되는 스택 트레이스 및 오류 메시지의 품질을 향상시키기 위해 여러 개의 수정을 진행했습니다.

이전에는 webpack-internal과 같은 번들러 오류를 표시했던 오류가 이제는 올바르게 오류의 소스 코드와 영향을 받는 파일을 표시합니다. 클라이언트 컴포넌트에서 오류를 보고 에디터에서 오류를 수정한 후 Fast Refresh가 오류 화면을 지우지 않았습니다. 이러한 경우를 여러 개 수정했습니다. 예를 들어, 클라이언트 컴포넌트에서 메타데이터를 내보내려고 할 때의 문제 등이 있었습니다.

예를 들어, 이전의 오류 메시지는 다음과 같았습니다

Next.js 14에서 fetch 호출에서 발생한 오류의 예시

Next.js 14.1에서는 이를 개선하여 다음과 같습니다

렌더링 중 발생한 fetch 호출의 오류는 이제 오류의 소스 코드와 영향을 받는 파일을 표시

window.history.pushState 및 window.history.replaceState

App Router는 이제 페이지를 다시로드하지 않고 브라우저의 히스토리 스택을 업데이트하는 데 사용되는 네이티브 pushState 및 replaceState 메서드의 사용을 허용합니다.

pushState 및 replaceState 호출은 Next.js App Router에 통합되어 usePathname 및 useSearchParams와 동기화할 수 있게 해줍니다.

이것은 필터, 정렬 순서 또는 다시로드 간에 유지되기를 원하는 기타 정보와 같은 상태를 즉시 업데이트해야 할 때 유용합니다.

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

Next.js에서 네이티브 History API를 사용하는 방법에 대해 더 자세히 알아보려면 다음 자료를 참고하시기 바랍니다:

Next.js 공식 문서 - Using the Native History API

Routing: Linking and Navigating | Next.js

데이터 캐시 로깅

next dev를 실행할 때 Next.js 애플리케이션에서 캐시된 데이터를 더 잘 관찰하기 위해 로깅 구성 옵션에 여러 개의 개선을 도입했습니다.

이제 캐시가 HIT되었는지 또는 SKIP되었는지와 요청된 전체 URL을 표시할 수 있습니다

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

이는 next.config.js를 통해 활성화할 수 있습니다

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

병렬 및 가로채기된 경로: 피드백을 기반으로한 20개의 버그 수정

Next.js 14.1에서는 Parallel & Intercepted Routes에 20개의 개선을 도입했습니다.

지난 두 릴리스 동안 Next.js의 성능과 신뢰성을 향상시키는 데 중점을 두었습니다.

이제 여러분의 피드백을 기반으로 Parallel & Intercepted Routes에 많은 개선을 도입할 수 있었습니다.

특히, 캐치-올 라우트와 서버 액션을 지원하도록 추가했습니다.

Parallel Routes를 사용하면 동시에 또는 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링할 수 있습니다.

대시보드 및 소셜 사이트의 피드와 같은 앱의 고도로 동적인 섹션에 대해서는 Parallel Routes를 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다.

Intercepted Routes를 사용하면 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 라우트를 로드할 수 있습니다.

예를 들어, 피드에서 사진을 클릭할 때 사진을 모달로 표시하여 피드를 오버레이할 수 있습니다.

이 경우 Next.js는 /photo/123 라우트를 가로채서 URL을 가리고 /feed 위에 오버레이합니다.

Parallel & Intercepted Routes에 대해 자세히 알아보거나 예제를 통해 알아보세요.

next/image 개선: <picture>, 아트 디렉션 및 다크 모드 지원

Next.js Image 컴포넌트는 이제 직접적으로 <Image>를 사용하지 않고도 더 고급적인 사용 사례를 getImageProps() (안정된 버전)를 통해 지원합니다. 

• background-image 또는 image-set과 함께 작업
• canvas context.drawImage() 또는 new Image()와 함께 작업
• <picture> 미디어 쿼리를 사용하여 아트 디렉션 또는 라이트/다크 모드 이미지를 구현

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

getImageProps()에 대해 더 자세히 알아보려면 Next.js 공식 문서 - Advanced Usage를 참고하세요.

기타 개선사항

최근 캐싱설명 및 App Router와 관련된 몇 가지 일반적인 실수에 대한 설명을 담은 동영상을 공개

• [Docs] 리다이렉팅에 관한 새로운 문서 (이동)
• [Docs] 테스팅에 관한 새로운 문서 (이동)
• [Docs] 프로덕션 체크리스트를 포함한 새로운 문서 (이동)
• [Feature] <GoogleAnalytics /> 컴포넌트를 next/third-parties에 추가 (문서)
• [Improvement] create-next-app이 이제 더 작고 빠르게 설치됩니다 (PR)
• [Improvement] 중첩된 라우트에서 에러가 발생하면 여전히 global-error에서 catch됩니다 (PR)
• [Improvement] 서버 액션에서 basePath를 사용할 때 redirect가 basePath를 존중합니다 (PR)
• [Improvement] next/script 및 beforeInteractive를 App Router와 함께 사용할 때의 사용법을 수정 (PR)
• [Improvement] 더 빠른 라우트 시작을 위해 @aws-sdk 및 lodash를 자동으로 트랜스파일 (PR)
• [Improvement] next dev 및 next/font에서 스타일이 적용되지 않은 콘텐츠 깜박임 수정 (PR)
• [Improvement] 세그먼트의 에러 경계를 통과하는 notFound 오류 전파 (PR)
• [Improvement] Pages Router i18n에서 로케일 도메인에서 퍼블릭 파일 제공 수정 (PR)
• [Improvement] 무효화된 다시 유효성 값이 전달될 경우 오류 수정 (PR)
• [Improvement] 윈도우에서 빌드가 만들어진 경우 리눅스 기계에서 경로 문제 수정 (PR)
• [Improvement] basePath를 사용하는 멀티 존 앱을 사용할 때 Fast Refresh / HMR 수정 (PR)
• [Improvement] 종료 신호에서의 우아한 종료 개선 (PR)
• [Improvement] 서로 다른 라우트에서 가로챌 때 모달 라우트 간 충돌 수정 (PR)
• [Improvement] basePath 구성을 사용할 때 라우트를 가로채는 경우 경고 표시 (PR)
• [Improvement] 누락된 병렬 슬롯이 404을 결과로 내놓는 경우 경고 표시 (PR)
• [Improvement] catch-all 라우트와 함께 사용할 때 가로채는 라우트 개선 (PR)
• [Improvement] revalidatePath와 함께 사용할 때 가로채는 라우트 개선 (PR)
• [Improvement] 병렬 라우트와 함께 @children 슬롯 사용 수정 (PR)
• [Improvement] 병렬 라우트 사용 시 params를 사용할 때 TypeError 수정 (PR)
• [Improvement] 기본 병렬 라우트를 위한 catch-all 라우트 정규화 수정 (PR)
• [Improvement] 다음 빌드 요약에서 병렬 라우트 표시 수정 (PR)
• [Improvement] 가로채는 라우트 사용 시 라우트 매개변수 문제 수정 (PR)
• [Improvement] 깊게 중첩된 병렬/가로채는 라우트 개선 (PR)
• [Improvement] route 그룹과 함께 사용할 때 404 수정 (PR)
• [Improvement] 서버 액션 및 라우터 캐시 재유효화와 함께 병렬 라우트 수정 (PR)
• [Improvement] 가로채는 라우트와 리다이렉트 사용 시 수정 (PR)
• [Improvement] 서드파티 라이브러리에서 Server Actions가 이제 작동합니다 (PR)
• [Improvement] Next.js를 ESM 패키지 내에서 사용할 수 있게 됐습니다 (PR)
• [Improvement] Material UI와 같은 라이브러리를 위한 Barrel 파일 최적화 (PR)
• [Improvement] useSearchParams를 Suspense 없이 잘못 사용하는 경우 빌드가 실패하도록 수정 (PR)