Next.js 16에서 달라진 점들

Next.js 16은 많은 변화를 가져왔습니다. 주요 변경사항을 정리해봤습니다.

주요 변경사항

1. Turbopack 기본 적용

Webpack 대신 Turbopack이 기본 번들러로 설정됩니다.

// Before (Next.js 15)
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build"
  }
}
 
// After (Next.js 16)
{
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

2. 비동기 Request APIs

params, searchParams, cookies(), headers() 등이 모두 비동기로 변경되었습니다.

// Before (Next.js 15)
export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
}
 
// After (Next.js 16)
export default async function Page({
  params
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params;
}

3. "use cache" 지시어

명시적 캐싱으로 전환되었습니다.

"use cache";
import { cacheLife } from "next/cache";
 
export default async function Page() {
  cacheLife("hours");
  const data = await fetchData();
  return <div>{data}</div>;
}

4. middleware → proxy

middleware.ts 파일명이 proxy.ts로 변경되었습니다.

// proxy.ts
export function proxy(request: Request) {
  // proxy logic
}

마이그레이션 팁

Codemod 사용: npx @next/codemod@canary upgrade latest
TypeScript 타입 업데이트
점진적 마이그레이션 (비동기 API부터)

자세한 내용은 공식 문서를 참고하세요!