Next.js 15 새로운 기능 완벽 가이드

개요

Next.js 15는 성능, 개발자 경험, 그리고 React 19 통합에 초점을 맞춘 메이저 업데이트입니다.

주요 변경사항

1. Turbopack 안정화 (Stable)

Rust 기반의 새로운 번들러 Turbopack이 드디어 안정화되었습니다.

# 개발 서버 시작 (자동으로 Turbopack 사용)
next dev

# 명시적으로 Turbopack 비활성화
next dev --no-turbopack

성능 개선:

로컬 서버 시작: 최대 76.7% 빨라짐
Fast Refresh: 최대 96.3% 빨라짐
초기 라우트 컴파일: 최대 45.8% 빨라짐

2. Partial Pre-rendering (PPR)

정적 콘텐츠와 동적 콘텐츠를 한 페이지에서 최적화합니다.

// next.config.js
module.exports = {
  experimental: {
    ppr: 'incremental'
  }
}

// app/page.tsx
export const experimental_ppr = true

export default async function Page() {
  return (
    <main>
      {/* 정적: 빌드 시 렌더링 */}
      <Header />

      {/* 동적: 요청 시 렌더링 */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>

      {/* 정적 */}
      <Footer />
    </main>
  )
}

3. React 19 지원

Next.js 15는 React 19를 완전히 지원합니다.

use() 훅

import { use } from 'react'

export default function Page({ dataPromise }) {
  // Promise를 직접 unwrap
  const data = use(dataPromise)

  return <div>{data.title}</div>
}

Form Actions 개선

export default function Form() {
  async function submitForm(formData: FormData) {
    'use server'
    // 서버에서 실행
  }

  return (
    <form action={submitForm}>
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  )
}

4. 캐싱 동작 변경

중요: fetch 요청과 라우트 핸들러가 기본적으로 캐시되지 않습니다.

// Next.js 14: 기본 캐시
// Next.js 15: 기본 no-store

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

// 또는 route segment config
export const fetchCache = 'default-cache'

5. 개선된 Server Actions

useActionState 훅

'use client'
import { useActionState } from 'react'

export function Form({ action }) {
  const [state, formAction, pending] = useActionState(action, null)

  return (
    <form action={formAction}>
      <input name="name" disabled={pending} />
      <button disabled={pending}>
        {pending ? '처리 중...' : '제출'}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  )
}

보안 강화

Server Actions에 암호화된 종료점이 자동 생성됩니다.

6. next/after API

응답 전송 후 백그라운드 작업 실행:

import { after } from 'next/server'

export async function POST(request: Request) {
  const data = await request.json()

  // 즉시 응답
  const response = await processData(data)

  // 응답 후 백그라운드에서 실행
  after(async () => {
    await logAnalytics(data)
    await sendNotification(data)
  })

  return Response.json(response)
}

7. instrumentation.js 안정화

애플리케이션 시작 시 코드 실행:

// instrumentation.js (프로젝트 루트)
export async function register() {
  // OpenTelemetry 초기화
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation-node')
  }
}

export function onRequestError({ error, request }) {
  // 에러 로깅
  console.error('Request error:', error)
}

8. Static Indicator

개발 모드에서 정적/동적 라우트를 시각적으로 표시합니다.

9. unstable_rethrow API

import { unstable_rethrow } from 'next/navigation'

try {
  // redirect() 또는 notFound() 호출 가능성 있는 코드
  await riskyOperation()
} catch (error) {
  // Next.js 내부 에러는 다시 throw
  unstable_rethrow(error)

  // 나머지 에러만 처리
  handleError(error)
}

마이그레이션 가이드

단계별 업그레이드

# 1. 의존성 업데이트
npm install next@15 react@19 react-dom@19

# 2. 자동 마이그레이션 실행
npx @next/codemod@canary upgrade latest

주요 체크리스트

[ ] fetch 캐싱 동작 검토
[ ] Server Actions 보안 검토
[ ] React 19 호환성 확인
[ ] next.config.js 업데이트
[ ] TypeScript 설정 확인

Breaking Changes

최소 Node.js 버전: 18.18 이상
fetch 기본 캐시: no-store
GET Route Handlers: 기본 캐시 안됨
React 19: 일부 API 변경

결론

Next.js 15는 성능과 개발자 경험 모두에서 큰 발전을 이루었습니다. Turbopack의 안정화와 PPR 같은 혁신적인 기능들이 프로덕션 준비가 되었으니, 새 프로젝트에서 적극 활용해보세요.