Next.js 16 迁移指南

npx @next/codemod@canary upgrade latest

// [변경 전]
// export default function Page({ params }: { params: { slug: string } }) { ... }
 
// [변경 후]
// 1. Props 타입: params를 Promise로 감싸줍니다.
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  
  // 2. 데이터 접근: 반드시 await를 사용하여 값을 추출해야 합니다.
  // await 없이 params.slug에 접근하면 런타임 에러가 발생합니다.
  const { slug } = await params;
 
  return <div>Blog Post: {slug}</div>;
}

import { cookies } from 'next/headers';
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  // [변경] cookies() 호출 앞에 await를 붙여야 합니다.
  // 이전 버전(v15)에서는 경고만 떴지만, v16에서는 에러가 발생합니다.
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme');
  
  return (
    <html lang="en" className={theme?.value}>
      <body>{children}</body>
    </html>
  );
}

module.exports = {
  images: {
    // 1. 로컬 이미지에 쿼리 스트링 사용 시 패턴 명시 필요
    localPatterns: [
      {
        pathname: '/assets/**',
        search: '?v=1',
      },
    ],
 
    // 2. 사설망 등에서 로컬 IP로 이미지 로드 시 필요 (보안 주의)
    // 기본값은 false로 변경되었습니다.
    dangerouslyAllowLocalIP: true, 
  },
};

// 해당 슬롯에 보여줄 기본 컨텐츠가 없더라도 파일은 생성해야 합니다.
export default function Default() {
  // 아무것도 렌더링하지 않으려면 null을 반환합니다.
  return null;
}

# 파일명 변경
mv middleware.ts proxy.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
// [변경] 함수 이름을 proxy로 수정
export function proxy(request: NextRequest) {
  return NextResponse.next();
}