Next.js 15의 Page Props 변경사항 정리

Type error: Type 'PageProps' does not satisfy the constraint 'import("/home/hyogeun/projects/NEXTJS/my-app/.next/types/app/meals/[mealSlug]/page").PageProps'.
  Types of property 'params' are incompatible.
    Type '{ mealSlug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

와 같은 에러가 발생하여 살펴보니

Next.js 15에서 페이지 컴포넌트의 params와 searchParams 타입이 변경되었다고 한다

이전 버전 (14 이하)

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

현재 버전 (15)

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

promise로 변경되어서 비동기적으로 불러와야 함

사용 예시

1. 서버 컴포넌트

export default async function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const { slug } = await params;
  const { query } = await searchParams;

  return <h1>Page: {slug}</h1>;
}

2. 클라이언트 컴포넌트

'use client';

import { use } from 'react';

export default function Page({
  params,
  searchParams
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const { slug } = use(params);
  const { query } = use(searchParams);

  return <h1>Page: {slug}</h1>;
}

주요 변경사항

1. params와 searchParams가 Promise 타입으로 변경
2. 값을 사용하기 위해서는 async/await 또는 use 훅 필요
3. 하위 호환성을 위해 동기적 접근도 가능 (향후 deprecated 예정)

이렇게 된 이유

1. 점진적 로딩 (Progressive Loading)

이전: 모든 params를 한번에 로드

현재: 필요한 params만 비동기적으로 로드

• 라우트 세그먼트별로 params를 독립적으로 로드
• 필요한 데이터만 가져와 초기 로딩 시간 개선
• Streaming SSR과의 더 나은 통합

2. 서버 컴포넌트 최적화

• params가 Promise이므로 서버에서 데이터를 준비하는 동안, 다른 컴포넌트 렌더링 가능
• 서버 컴포넌트의 병렬 처리 가능, Suspense 기반 로딩 상태 처리 용이, 전체 페이지 블로킹 없이 부분적 로딩

3. 데이터 요청 최적화

• 불필요한 데이터 요청 감소
• 리소스 사용 최적화
• 더 효율적인 캐싱 가능

출처: Next.js 공식 문서