Next.js 15 새 기능과 마이그레이션 가이드 — React 서버 컴포넌트 시대 (2026)

Modern web development workspace

Next.js 15가 중요한 이유

Next.js는 React 기반 풀스택 웹 프레임워크의 사실상 표준입니다. 2026년 현재, Next.js 15는 React 서버 컴포넌트(RSC), 서버 액션, Turbopack 등 차세대 웹 개발 패러다임을 안정적으로 제공하며, 성능과 개발자 경험 모두에서 큰 도약을 이루었습니다.

Next.js 15 핵심 새 기능

React 19 지원

Next.js 15는 React 19를 기본 지원합니다. React 19의 주요 변화:

Actions: 폼 제출과 데이터 변경을 위한 통합 패턴
use() 훅: 비동기 리소스(Promise, Context)를 직접 읽기
서버 컴포넌트 안정화: RSC가 프로덕션 레벨로 완전 안정화
Document Metadata API: <title>, <meta> 등을 컴포넌트에서 직접 관리

Turbopack 안정화

Webpack의 후속인 Turbopack이 Next.js 15에서 안정 버전으로 졸업했습니다:

next dev --turbopack

성능 개선:

로컬 서버 시작: 최대 76% 빠름
Fast Refresh: 최대 96% 빠름
초기 라우트 컴파일: 최대 45% 빠름

캐싱 기본값 변경

Next.js 15에서 가장 큰 **파괴적 변경(breaking change)**은 캐싱 기본값입니다:

// Next.js 14: fetch()가 기본적으로 캐시됨
// Next.js 15: fetch()가 기본적으로 캐시되지 않음 (no-store)

// 캐시하려면 명시적으로 지정
fetch('https://api.example.com/data', { cache: 'force-cache' })

이 변경은 예측 가능성을 높이고, "왜 데이터가 업데이트되지 않지?"라는 흔한 혼란을 줄입니다.

부분 사전 렌더링(PPR)

Partial Prerendering은 하나의 페이지에서 정적 부분과 동적 부분을 동시에 처리합니다:

// layout.js — PPR 활성화
export const experimental_ppr = true

export default function Layout({ children }) {
  return (
    <div>
      <StaticHeader />  {/* 빌드 시 렌더링 */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />  {/* 요청 시 스트리밍 */}
      </Suspense>
    </div>
  )
}

서버 액션 강화

// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  await db.posts.create({ title })
  revalidatePath('/posts')
}

Next.js 15에서 서버 액션은 더 강력한 에러 핸들링, 리다이렉트 지원, 보안 강화가 이루어졌습니다.

Next.js 14 → 15 마이그레이션 가이드

Step 1: 의존성 업데이트

npm install next@15 react@19 react-dom@19

Step 2: 캐싱 전략 검토

기존 fetch() 호출에서 캐싱에 의존하고 있었다면, 명시적으로 cache: 'force-cache'를 추가합니다.

Step 3: 비동기 Request API

Next.js 15에서 cookies(), headers(), params, searchParams가 비동기로 변경되었습니다:

// Before (Next.js 14)
export default function Page({ params }) {
  const { id } = params
}

// After (Next.js 15)
export default async function Page({ params }) {
  const { id } = await params
}

Step 4: 자동 마이그레이션 도구

npx @next/codemod@canary upgrade latest

이 코드모드가 대부분의 자동 변환을 처리합니다.

App Router 패턴 Best Practices

서버 vs 클라이언트 컴포넌트

기본: 서버 컴포넌트 (데이터 페칭, 정적 UI)
'use client' 추가: 인터랙티브 UI (이벤트 핸들러, 상태, 브라우저 API)

원칙: 트리의 가장 아래(리프)에서만 'use client'를 사용합니다.

데이터 페칭 패턴

// 서버 컴포넌트에서 직접 데이터 페칭 (권장)
async function PostList() {
  const posts = await db.posts.findMany()
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

로컬 LLM으로 개발 생산성 높이기와 결합하면, AI 기반 코드 생성과 Next.js 15의 생산성을 동시에 누릴 수 있습니다.

참고 자료

결론

Next.js 15는 React 서버 컴포넌트의 완전한 안정화, Turbopack의 졸업, 캐싱 기본값 합리화 등 웹 개발의 새로운 표준을 제시합니다. 마이그레이션은 코드모드와 점진적 전환을 통해 안전하게 진행할 수 있습니다.