1장: Next.js 15의 등장과 App Router의 진화

Next.js는 React 생태계에서 가장 널리 사용되는 풀스택 프레임워크입니다. 2024년 10월에 출시된 Next.js 15는 React 19 지원, 비동기 Request API, 캐싱 기본값 변경이라는 세 가지 대전환을 가져왔고, 2025년 10월에 출시된 Next.js 16은 Cache Components, Turbopack 기본 번들러 전환, proxy.ts라는 새로운 미들웨어 패러다임을 도입했습니다.

이 장에서는 Next.js 15부터 16.2까지의 진화를 한눈에 조망하고, 이 시리즈에서 다룰 내용을 개괄합니다.

Next.js의 진화 타임라인

Next.js 15의 핵심 변경사항

비동기 Request API (Breaking Change)

Next.js 15에서 가장 큰 변경은 cookies(), headers(), params, searchParams 등의 Request API가 비동기로 전환된 것입니다.

// Next.js 14: 동기
import { cookies } from 'next/headers';
function Page() {
  const cookieStore = cookies();
  const theme = cookieStore.get('theme');
}
 
// Next.js 15: 비동기 (await 필수)
import { cookies } from 'next/headers';
async function Page() {
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme');
}

params와 searchParams도 마찬가지입니다.

// Next.js 14
function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}
 
// Next.js 15
async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <div>{id}</div>;
}

이 변경은 서버 렌더링 최적화를 위한 것입니다. 요청 데이터에 대한 접근이 비동기가 되면서, React가 렌더링을 더 효율적으로 스케줄링할 수 있게 되었습니다.

캐싱 기본값 변경 (Breaking Change)

Next.js 14에서는 fetch()가 기본적으로 캐싱되었습니다. Next.js 15에서는 캐싱하지 않는 것이 기본값이 되었습니다.

// Next.js 14: 기본적으로 캐싱됨 (force-cache)
const data = await fetch('https://api.example.com/posts');
 
// Next.js 15: 기본적으로 캐싱 안 됨 (no-store)
const data = await fetch('https://api.example.com/posts');
 
// 캐싱을 원하면 명시적으로 지정
const data = await fetch('https://api.example.com/posts', {
  cache: 'force-cache',
});
 
// 또는 시간 기반 갱신
const data = await fetch('https://api.example.com/posts', {
  next: { revalidate: 3600 },
});

"명시적인 것이 암묵적인 것보다 낫다"는 철학에 따른 변경입니다. 캐싱은 의식적인 선택이 되어야 합니다.

Turbopack Dev 안정화

Rust 기반 번들러인 Turbopack이 개발 모드에서 안정화되었습니다.

• 로컬 서버 시작: 76.7% 더 빠름
• Fast Refresh: 96.3% 더 빠름
• 초기 라우트 컴파일: 45.8% 더 빠름

React 19 지원

Next.js 15.0에서 React 19 RC를, 15.1에서 React 19 안정 버전을 공식 지원합니다. App Router는 React 19를 필요로 하며, Pages Router는 React 18도 계속 지원합니다.

Next.js 16의 핵심 변경사항

Cache Components와 "use cache"

Next.js 14의 PPR(Partial Prerendering) 실험이 Next.js 16에서 **Cache Components**라는 새로운 시스템으로 진화했습니다.

const nextConfig = {
  cacheComponents: true,
};

async function BlogList() {
  "use cache";
  const posts = await db.post.findMany();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

"use cache" 디렉티브를 선언한 컴포넌트나 함수의 결과가 캐싱됩니다. cacheLife로 캐싱 기간을, cacheTag로 무효화 단위를 세밀하게 제어할 수 있습니다.

Turbopack 기본 번들러

Next.js 16부터 Turbopack이 개발과 프로덕션 빌드 모두에서 기본 번들러가 되었습니다.

• 프로덕션 빌드: 2~5배 빠름
• Fast Refresh: 최대 10배 빠름
• 파일 시스템 캐싱: 캐시 적중 시 최대 14배 빠른 dev 시작

proxy.ts (미들웨어 진화)

기존 middleware.ts가 proxy.ts로 대체되었습니다. 가장 큰 차이는 Node.js 런타임에서 실행된다는 점입니다. Edge 런타임의 제약(제한된 API, 번들 크기 제한)에서 벗어나 Node.js의 모든 API를 사용할 수 있습니다.

React 19.2 통합

Next.js 16은 React 19.2의 기능을 통합합니다.

• View Transitions: 페이지 전환 애니메이션
• useEffectEvent(): Effect에서 비반응적 로직 분리
• <Activity />: 숨겨진 상태에서도 컴포넌트 state 유지

Next.js 16.2: 최신 상태

2026년 3월에 출시된 16.2는 성능과 안정성에 집중했습니다.

• 87% 빠른 next dev 시작 (16.1 대비)
• 25~60% 빠른 렌더링 (React RSC 역직렬화 350% 개선)
• Build Adapters 안정화: 커스텀 배포 플랫폼 지원
• ImageResponse 2~20배 빠름
• 200개 이상의 Turbopack 버그 수정

이 시리즈의 구성

이 시리즈는 Next.js 15부터 16까지의 App Router를 체계적으로 다룹니다.

학습 사전 요구사항

• React 19 기본 개념 (이 시리즈의 이전 시리즈 "React 19 & 서버 컴포넌트 혁명" 참조)
• TypeScript 기초
• HTML/CSS 기본
• 터미널 기본 사용법

핵심 요약

• Next.js 15는 비동기 Request API, 캐싱 기본값 변경(no-store), Turbopack Dev 안정화라는 세 가지 Breaking Change를 도입했습니다.
• Next.js 16은 Cache Components("use cache"), Turbopack 기본 번들러 전환, proxy.ts, React 19.2 통합을 가져왔습니다.
• Next.js 16.2는 87% 빠른 dev 시작, Build Adapters 안정화, 200개 이상의 Turbopack 수정을 포함합니다.
• 전반적인 방향은 "명시적 캐싱", "서버 우선 아키텍처", "빌드 성능 극대화"입니다.

다음 장에서는 App Router의 핵심 아키텍처인 레이아웃, 템플릿, 라우트 그룹을 심층적으로 다룹니다.