Next.js Blog - Next.js 14.2 (2024.04.11) 번역

Posted Apr 20, 2024 Updated Jul 17, 2024

By Kidongg 14 min read

본 포스팅은 Next.js의 공식 블로그에 포스팅된 내용을 번역한 것입니다.

Next.js 14.2

Next.js 14.2에는 개발, 프로덕션 및 캐싱 개선 사항이 포함되어 있습니다.

Turbopack for Development (Release Candidate) : next dev --turbo 통과율 99.8%
Build and Production Improvements : 빌드 메모리 사용량 감소 및 CSS 최적화
Caching Improvements : staleTimes로 무효화 기간을 구성
Error DX Improvements : 하이드레이션 불일치 오류 개선 및 디자인 업데이트

지금 업그레이드하거나 시작하세요.

npx create-next-app@latest

Turbopack for Development (Release Candidate)

지난 몇 달 동안 저희는 Turbopack의 로컬 개발 성능을 개선하기 위해 노력해 왔습니다. 이제 버전 14.2에서 로컬 개발용으로 Turbopack 릴리스를 사용할 수 있습니다.

99.8% of integrations tests are now passing.
We’ve verified the top 300 npm packages used in Next.js applications can compile with Turbopack.
All Next.js examples work with Turbopack.
We’ve integrated Lightning CSS, a fast CSS bundler and minifier, written in Rust.

저희는 터보팩을 Vercel의 애플리케이션에 광범위하게 적용하고 있습니다. 예를 들어, 대규모 Next.js 앱인 vercel.com에서 다음을 확인했습니다.

Up to 76.7% faster local server startup.
Up to 96.3% faster code updates with Fast Refresh.
Up to 45.8% faster initial route compile without caching (Turbopack does not have disk caching yet).

터보팩은 계속 opt-in 방식으로 제공되며 다음과 같이 사용해 볼 수 있습니다.

next dev --turbo

앞으로 memory usage, implementing persistent caching, next build --turbo에 집중할 예정입니다.

Memory Usage : 메모리 사용량을 조사할 수 있는 로우레벨 도구를 구축했습니다. 이제 성능 메트릭과 광범위한 메모리 사용량 정보를 모두 포함하는 추적을 생성할 수 있습니다. 이러한 추적을 통해 애플리케이션의 소스 코드에 액세스하지 않고도 성능과 메모리 사용량을 조사할 수 있습니다.
Persistent Caching : 또한 최적의 아키텍처 옵션을 모색하고 있으며, 향후 릴리스에서 더 자세한 내용을 공유할 수 있을 것으로 예상됩니다.
next build : 터보팩은 아직 빌드에 사용할 수 없지만 74.7%의 테스트가 이미 통과되었습니다. 진행 상황은 areweturboyet.com/build에서 확인할 수 있습니다.

터보팩에서 지원되는 기능 및 지원되지 않는 기능 목록을 보려면 문서를 참조하세요.

Build and Production Improvements

터보팩을 통한 번들링 개선 외에도 모든 Next.js 애플리케이션(페이지 및 앱 라우터 모두)의 전반적인 빌드 및 프로덕션 성능을 개선하기 위해 노력했습니다.

Tree-shaking

서버와 클라이언트 컴포넌트 사이의 경계에 대한 최적화를 통해 사용하지 않는 내보내기를 트리 셰이킹할 수 있는 기능을 개선했습니다. 예를 들어, 'use client'가 있는 파일에서 단일 Icon 컴포넌트를 가져오면 더 이상 해당 패키지의 다른 모든 아이콘이 포함되지 않습니다. 이렇게 하면 프로덕션 자바스크립트 번들 크기를 크게 줄일 수 있습니다.

react-aria-components와 같이 널리 사용되는 라이브러리에서 이 최적화를 테스트한 결과 최종 번들 크기가 -51.3% 감소했습니다.

Note : 이 최적화는 현재 배럴 파일에서는 작동하지 않습니다. 그 동안에는 optimizePackageImports 구성 옵션을 사용할 수 있습니다.

  
// next.config.ts

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

Build Memory Usage

매우 큰 규모의 Next.js 애플리케이션의 경우 프로덕션 빌드 중에 메모리 부족 충돌(OOMs)이 발생하는 것을 발견했습니다. 사용자 신고와 재현 사례를 조사한 결과, 근본적인 문제는 과도한 번들링 및 축소(Next.js가 중복된 더 적은 수의 더 큰 JavaScript 파일을 생성함)라는 것을 확인했습니다. 이러한 경우를 위해 번들링 로직을 리팩터링하고 컴파일러를 최적화했습니다.

초기 테스트 결과, 최소한의 Next.js 앱에서 메모리 사용량과 캐시 파일 크기가 평균 2.2GB에서 190MB 이하로 감소한 것으로 나타났습니다.

메모리 성능을 더 쉽게 디버깅할 수 있도록 next build에 --experimental-debug-memory-usage 플래그를 도입했습니다. 자세한 내용은 문서에서 확인하세요.

CSS

페이지 간에 이동할 때 스타일이 충돌하지 않도록 CSS를 청크화하여 프로덕션 Next.js 빌드 중에 CSS가 최적화되는 방식을 업데이트했습니다.

이제 CSS 청크의 순서와 병합은 가져오기 순서에 따라 정의됩니다. 예를 들어, base-button.module.css는 page.module.css보다 앞에 정렬됩니다.

  
// base-button.tsx

import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

  
// page.tsx

import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

올바른 CSS 순서를 유지하려면 다음을 권장합니다.

Using CSS Modules over global styles.
Only import a CSS Module in a single JS/TS file.
If using global class names, import the global styles in the same JS/TS too.

이번 변경이 대부분의 애플리케이션에 부정적인 영향을 미치지는 않을 것으로 예상합니다. 하지만 업그레이드 시 예기치 않은 스타일이 표시되는 경우 문서에 나와 있는 권장 사항에 따라 CSS 가져오기 순서를 검토하세요.

Caching Improvements

캐싱은 빠르고 안정적인 웹 애플리케이션을 구축하는 데 있어 매우 중요한 부분입니다. 변형을 수행할 때 사용자와 개발자 모두 캐시가 최신 변경 사항을 반영하도록 업데이트되기를 기대합니다. 저희는 앱 라우터에서 Next.js 캐싱 환경을 개선하는 방법을 모색해 왔습니다.

`staleTimes` (Experimental)

클라이언트 측 라우터 캐시는 클라이언트에서 방문한 경로와 미리 가져온 경로를 캐싱하여 빠른 탐색 환경을 제공하도록 설계된 캐싱 계층입니다.

커뮤니티 피드백을 바탕으로 클라이언트 측 라우터 캐시 무효화 기간을 구성할 수 있는 실험적인 staleTimes 옵션을 추가했습니다.

기본적으로 프리페치된 경로(prefetch 프로퍼티 없이 <Link> 컴포넌트 사용)는 30초 동안 캐시되며, prefetch 프로퍼티가 true로 설정된 경우 5분 동안 캐시됩니다. next.config.js에서 사용자 정의 재검증 시간을 정의하여 이러한 기본값을 덮어쓸 수 있습니다.

  
// next.config.ts

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

staleTimes는 캐싱 휴리스틱을 더 잘 제어하고자 하는 사용자의 현재 경험을 개선하는 것을 목표로 하지만 완전한 해결책이 되지는 않습니다. 향후 릴리스에서는 전반적인 캐싱 시맨틱을 개선하고 보다 유연한 솔루션을 제공하는 데 중점을 둘 예정입니다.

staleTimes에 대한 자세한 내용은 문서에서 확인하세요.

Parallel and Intercepting Routes

병렬 라우팅 및 인터셉트 라우팅에 대한 반복 작업을 계속하고 있으며, 이제 클라이언트 측 라우터 캐시와의 통합을 개선하고 있습니다.

revalidatePath 또는 revalidateTag를 사용하여 서버 작업을 호출하는 병렬 및 가로채기 경로는 사용자의 현재 보기를 유지하면서 캐시를 재검증하고 표시된 슬롯을 새로 고칩니다.
마찬가지로 이제 router.refresh를 호출하면 현재 보기를 유지하면서 표시되는 슬롯이 올바르게 새로 고쳐집니다.

Errors DX Improvements

14.1 버전에서는 next dev 작업을 실행할 때 오류 메시지와 스택 추적의 가독성을 개선하기 위한 작업을 시작했습니다. 이 작업은 14.2 버전까지 이어져 오류 메시지 개선, 앱 라우터와 페이지 라우터의 오버레이 디자인 개선, 라이트 및 다크 모드 지원, 더 명확한 dev 및 build 로그가 포함되었습니다.

예를 들어, React Hydration 오류는 커뮤니티에서 흔히 발생하는 혼란의 원인입니다. 사용자가 하이드레이션 불일치의 원인을 정확히 파악할 수 있도록 개선했지만(아래 참조), 근본적인 오류 메시지를 개선하고 오류가 발생한 파일 이름을 표시하기 위해 React 팀과 협력하고 있습니다.

Before : 14.2 이전 버전 Next.js 오류 오버레이

After : 14.2 이후 버전 Next.js 오류 오버레이

React 19

지난 2월, React 팀은 곧 출시될 React 19를 발표했습니다. React 19를 준비하기 위해 최신 기능과 개선 사항을 Next.js에 통합하는 작업을 진행 중이며, 이러한 변경 사항을 조율하는 주요 버전을 출시할 계획입니다.

React 카나리아 채널에서 Next.js 내에서 사용할 수 있었던 액션 및 관련 훅과 같은 새로운 기능은 이제 모든 React 애플리케이션(클라이언트 전용 애플리케이션 포함)에서 모두 사용할 수 있게 됩니다. React 에코시스템에서 이러한 기능이 더 널리 채택되기를 기대합니다.

Community

현재 Next.js의 월간 활성 개발자는 1백만 명이 넘습니다. 커뮤니티의 지원과 기여에 감사드립니다. GitHub Discussions, Reddit 및 Discord에서 대화에 참여하세요.

Translation, Next.js Blog

This post is licensed under CC BY 4.0 by the author.