Next.js 16 핵심 업데이트 총정리 개발자라면 놓치지 마세요

 

Next.js 16 핵심 업데이트 총정리 개발자라면 놓치지 마세요

 

Next.js 16이 드디어 출시되었는데요.

이번 업데이트는 결코 가볍지 않은, 그야말로 '역대급'이라고 할 수 있습니다.

안정화된 터보팩(Turbopack)부터 내장된 리액트 컴파일러(React Compiler), 한층 더 똑똑해진 라우팅, 그리고 개발자들의 오랜 골칫거리였던 캐싱 문제를 해결해 줄 새로운 API까지 정말 많은 것들이 바뀌었거든요.

이번 글에서는 Next.js 16의 핵심 기능과 꼭 알아둬야 할 주요 변경점들을 예제와 함께 자세히 짚어보겠습니다.

 

드디어 안정화된 터보팩(Turbopack)

드디어 터보팩(Turbopack)이 개발 및 프로덕션 환경 모두에서 안정화 단계에 접어들었는데요.

이제부터는 모든 애플리케이션의 기본 번들러로 터보팩이 사용됩니다.

실제로 Next.js 15.3 이상 버전에서 이미 개발 세션의 50% 이상, 프로덕션 빌드의 20%가 터보팩으로 실행되고 있었거든요.

물론 기존의 웹팩(webpack)을 계속 사용하고 싶다면 아래 명령어를 통해 간단히 옵션을 지정할 수 있습니다.

next dev --webpack
next build --webpack

터보팩을 사용하면 얻을 수 있는 이점은 명확한데요.

프로덕션 빌드 속도는 '2~5배', 빠른 새로고침(Fast Refresh) 속도는 '최대 10배'까지 빨라지며 별도의 설정도 전혀 필요하지 않습니다.

 

터보팩 파일 시스템 캐싱 (베타)

이제 터보팩이 개발 환경에서 파일 시스템 캐싱을 지원하게 되었는데요.

이는 빌드 결과물을 디스크에 저장하여, 프로그램을 재시작해도 훨씬 빠른 컴파일 속도를 경험하게 해주는 기능입니다.

특히 모노레포(monorepo) 환경에서 아주 유용한 기능이거든요.

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

버셀(Vercel)의 모든 내부 앱에서는 이미 이 기능을 사용하며 눈에 띄는 성능 개선을 확인했다고 합니다.

 

간소화된 create-next-app

'create-next-app'의 설정 과정이 더욱 간소화되었는데요.

새로운 템플릿에는 앱 라우터(App Router)가 기본으로 포함되며, 타입스크립트(TypeScript) 우선 설정, 테일윈드 CSS(Tailwind CSS), 그리고 ESLint가 기본으로 제공됩니다.

 

리액트 컴파일러(React Compiler) 정식 지원

리액트 컴파일러(React Compiler) 지원 기능이 드디어 안정화되었는데요.

이제는 개발자가 직접 'useMemo'나 'useCallback'을 사용하지 않아도 자동으로 메모이제이션을 처리해 줍니다.

컴파일러가 모든 것을 알아서 최적화해주는 것이거든요.

const nextConfig = {
  reactCompiler: true,
};

컴파일러 플러그인 설치는 아래 명령어로 간단하게 할 수 있는데요.

npm install babel-plugin-react-compiler@latest

다만 리액트 컴파일러는 바벨(Babel)에 의존하기 때문에 컴파일 시간이 다소 길어질 수 있다는 점은 참고해야 합니다.

 

완전히 새로워진 캐싱 API

Next.js 16에서는 캐시 동작을 보다 명시적으로 제어할 수 있도록 개선된 새로운 캐싱 API들을 선보였는데요.

하나씩 자세히 살펴보겠습니다.

 

revalidateTag() 이제 캐시 프로필이 필요합니다

이제 revalidateTag() 함수는 두 번째 인자로 '캐시 프로필(cacheLife profile)'을 필수로 요구하게 되었는데요.

이 기능은 페이지 전체가 아닌 특정 부분의 캐시만 무효화하고 싶을 때 아주 유용합니다.

// 대부분의 경우에 권장
revalidateTag('blog-posts', 'max');
// 기타 내장 프로필
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');
// 사용자 지정 재검증 시간
revalidateTag('products', { revalidate: 3600 });

대부분의 경우에는 'max' 프로필 사용을 권장하거든요.

이 프로필은 사용자가 태그된 콘텐츠를 요청하면 일단 캐시된 데이터를 즉시 보여주고, 백그라운드에서 Next.js가 데이터를 재검증하는 방식으로 동작합니다.

즉각적인 업데이트가 필요하지 않은 블로그 게시물, 분석 데이터, 대시보드 등에 완벽한 기능입니다.

 

즉각적인 데이터 갱신 updateTag()

'updateTag()'는 서버 액션(Server Actions)에서만 사용할 수 있는 API인데요.

같은 요청 내에서 캐시된 데이터를 만료시키고 즉시 새로고침하여 'read-your-writes' 의미 체계를 보장해주는 것이 특징입니다.

'use server';
import { updateTag } from 'next/cache';
export async function updateUserProfile(userId, profile) {
  await db.users.update(userId, profile);
  updateTag(`user-${userId}`);
}

'revalidateTag()'와는 다르게 이 API는 즉시 동작하거든요.

따라서 사용자 설정, 프로필, 대시보드처럼 사용자가 변경 사항을 바로 확인해야 하는 기능에 아주 적합합니다.

 

캐시되지 않은 데이터만 새로고침 refresh()

refresh() 역시 서버 액션에서만 사용할 수 있는 API인데요.

이름 그대로 캐시를 전혀 건드리지 않고, 오직 캐시되지 않은 데이터만 새로고침하는 역할을 합니다.

'use server';
import { refresh } from 'next/cache';
export async function markNotificationAsRead(notificationId) {
  await db.notifications.markAsRead(notificationId);
  refresh();
}

정적인 셸은 그대로 유지하면서 알림 배지, 장바구니 개수, 실시간 통계처럼 동적인 부분만 업데이트할 때 아주 유용하거든요.

이는 클라이언트 사이드의 'router.refresh()'와 상호 보완적인 관계라고 볼 수 있습니다.

 

빌드 어댑터 API (알파)

이제 자체 인프라에 배포하기 위해 빌드 프로세스에 연결되는 사용자 지정 어댑터를 만들 수 있게 되었는데요.

클라우드플레어 워커(Cloudflare Workers)에 배포하거나, S3에 자산을 업로드하거나, 내부 플랫폼을 사용하는 등 Next.js가 진정으로 모듈화되고 있음을 보여주는 변화입니다.

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};

향상된 라우팅 및 내비게이션

라우팅 시스템이 전면적으로 개편되면서 페이지 전환이 더욱 가볍고 빨라졌습니다.

특히 주목할 만한 점은 '레이아웃 중복 제거'인데요.

공유 레이아웃을 사용하는 여러 URL을 미리 가져올 때, 각 링크마다 별도로 다운로드하는 대신 레이아웃을 단 한 번만 다운로드합니다.

예를 들어 50개의 상품 링크가 있는 페이지에서 이전에는 공유 레이아웃을 50번 다운로드해야 했다면, 이제는 단 한 번만 다운로드하면 되도록 변경되었습니다.

또한, '증분 프리페칭(Incremental Prefetching)' 기능도 도입되었거든요.

Next.js는 이제 캐시에 없는 부분만 미리 가져오고, 링크가 뷰포트를 벗어나면 요청을 취소하며, 마우스를 올렸을 때의 프리페칭을 우선순위로 처리합니다.

 

캐시 컴포넌트와 PPR 통합

Next.js 16에서는 'experimental PPR' 플래그가 제거되었는데요.

대신 부분적 사전 렌더링(Partial Pre-Rendering, PPR) 기능이 캐시 컴포넌트(Cache Components)로 통합됩니다.

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

PPR은 정적 콘텐츠를 먼저 로드하고 동적 콘텐츠는 스트리밍하는 방식인데요.

캐시 컴포넌트와 통합되면서 무엇을 캐시하고 무엇을 캐시하지 않을지 더 스마트하게 결정할 수 있게 됩니다.

 

리액트(React) 19.2 통합

Next.js 16은 리액트(React) 19.2의 기능을 포함한 최신 리액트 카나리(Canary) 릴리스를 사용하는데요.

뷰 트랜지션(View Transitions), 'useEffectEvent()', ''와 같은 새로운 기능들을 활용할 수 있습니다.

 

주요 변경 사항 (Breaking Changes)

이번 업데이트에는 주의해야 할 주요 변경 사항들이 몇 가지 있는데요.

하나씩 짚어보겠습니다.

 

버전 요구사항

먼저, 이번 업데이트부터는 노드(Node.js) 20.9 이상 버전이 필수가 되었거든요.

더 이상 노드 18은 지원하지 않으며, 타입스크립트(TypeScript)는 5.1.0 이상 버전을 사용해야 합니다.

 

핵심 제거 사항

AMP 지원이 완전히 제거되었고, 'next lint' 명령어는 ESLint를 직접 사용하도록 변경되었습니다.

또한 런타임 설정이 제거되어 이제 '.env' 파일을 사용해야 하며, 'experimental.ppr' 플래그는 'experimental.cacheComponents'로 대체되었습니다.

 

동작 변경

가장 큰 변화는 터보팩이 기본 번들러가 된 것인데요.

이 외에도 이미지 캐시 TTL 기본값이 60초에서 4시간으로 변경되는 등 이미지 관련 설정들의 기본값이 다수 변경되었습니다.

앞서 설명한 것처럼 'revalidateTag()' 함수는 이제 두 번째 인자로 캐시 프로필을 필수로 요구합니다.

 

지원 중단 예정 (Deprecations)

기존 'middleware.ts'는 'proxy.ts'로 이름을 변경하는 것이 권장되는데요.

이는 해당 파일이 네트워크 경계와 라우팅에 더 집중된 역할을 한다는 점을 명확히 하기 위함입니다.

'next/legacy/image'와 'images.domains' 옵션 또한 지원 중단될 예정이니 새로운 방식으로 전환해야 합니다.

 

마무리하며

Next.js 16은 정말 개발자들의 삶의 질을 높여줄 유용한 기능들로 가득한데요.

새로운 캐싱 API는 실제 현업의 문제를 해결해주고, 라우팅은 거의 즉각적으로 느껴질 만큼 빨라졌으며, 터보팩은 모두에게 엄청난 성능 향상을 가져다줄 것입니다.

2주 후에 열릴 Next.js Conf 이전에 더 많은 기능들이 공개될 예정이라고 하거든요.

지금 바로 베타 버전을 설치해서 테스트를 시작해보는 것을 추천합니다.

이번에 소개된 기능들은 앞으로 우리의 개발 방식에 큰 영향을 줄 것이 분명합니다.

# 자동 업그레이드
npx @next/codemod@canary upgrade beta

# 수동 업그레이드
npm install next@beta react@latest react-dom@latest

# 새 프로젝트 생성
npx create-next-app@beta