개요

Next.js 15는 App Router의 안정화와 함께 프론트엔드 개발의 새로운 패러다임을 제시합니다. 서버 컴포넌트, 스트리밍, 병렬 라우팅 등 혁신적인 기능들이 대폭 개선되었으며, React 19와의 완벽한 통합을 이루었습니다. 이 가이드에서는 Next.js 15 App Router의 핵심 개념부터 실전 활용까지 체계적으로 정리합니다.

핵심 개념

App Router는 파일 시스템 기반 라우팅을 제공하며, 각 라우트 세그먼트가 독립적인 레이아웃과 로딩 상태를 가질 수 있습니다. Next.js 15에서 주목할 변화는 다음과 같습니다.

1. 비동기 Request API: headers(), cookies(), params, searchParams가 모두 비동기 함수로 변경되었습니다. 이는 서버 렌더링 최적화를 위한 핵심 변경사항입니다.

2. 캐싱 전략 변경: fetch 요청과 GET Route Handler가 더 이상 기본적으로 캐싱되지 않습니다. 필요한 경우 명시적으로 캐싱을 설정해야 합니다.

3. Turbopack 안정화: next dev --turbopack이 안정 버전으로 제공되어 개발 서버 시작 속도가 최대 76% 향상되었습니다.

4. Partial Prerendering (PPR): 정적 콘텐츠와 동적 콘텐츠를 하나의 페이지에서 혼합할 수 있는 실험적 기능이 더욱 발전했습니다.

실전 예제

App Router의 비동기 API 활용법을 살펴보겠습니다.

// app/blog/[slug]/page.tsx - Next.js 15 비동기 params
interface BlogPageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPage({ params }: BlogPageProps) {
  const { slug } = await params;

  const post = await fetch(
    `https://api.example.com/posts/${slug}`,
    { next: { revalidate: 3600 } } // 명시적 캐싱
  ).then(res => res.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

Parallel Routes와 Intercepting Routes를 활용한 모달 패턴도 유용합니다.

// app/layout.tsx - 병렬 라우트 레이아웃
export default function Layout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

// app/@modal/(.)photo/[id]/page.tsx - 인터셉트 라우트
export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);
  return <Modal><PhotoDetail photo={photo} /></Modal>;
}

활용 팁

  • generateStaticParams를 활용하면 동적 라우트를 빌드 타임에 정적으로 생성할 수 있어 성능이 크게 향상됩니다.
  • loading.tsx 파일을 각 라우트 세그먼트에 배치하면 자동으로 Suspense 경계가 생성되어 스트리밍 SSR이 적용됩니다.
  • error.tsx와 not-found.tsx를 적극 활용하여 세분화된 에러 처리를 구현하세요.
  • Turbopack을 개발 환경에서 기본으로 사용하면 HMR 속도가 체감될 만큼 빨라집니다.
  • unstable_cache 대신 React의 cache() 함수를 사용하여 서버 컴포넌트 내 데이터 캐싱을 관리하세요.
  • Server Actions를 폼 처리에 활용하면 별도의 API 엔드포인트 없이 서버 로직을 실행할 수 있습니다.

마무리

Next.js 15 App Router는 서버 중심 아키텍처를 완성하는 중요한 전환점입니다. 비동기 API 변경, 캐싱 전략 수정, Turbopack 안정화 등은 모두 성능과 개발 경험을 동시에 개선하기 위한 방향성을 보여줍니다. 기존 Pages Router에서 마이그레이션할 때는 점진적으로 진행하며, 새 프로젝트에서는 App Router를 적극 채택하는 것을 권장합니다.