Next.js 16에서 달라진 점들
Next.js 16의 주요 변경사항: Turbopack 기본 적용, 비동기 params, use cache 지시어 등
TypeScriptReactNext.js
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부터)
자세한 내용은 공식 문서를 참고하세요!
댓글 (3)
최승환2026.02.11 07:59
use cache 지시어 관련해서 더 자세한 설명 부탁드립니다!
정민지2026.02.12 01:59
비동기 params가 처음엔 헷갈렸는데, 익숙해지니 더 명확한 것 같아요.
김태현2026.02.12 04:59
Turbopack 정말 빠르네요! 개발 경험이 확실히 좋아졌습니다.