찍찍이 #트러블 슈팅 (App Router 환경에서의 동적라우팅)

Next js 동적 라우팅이란?

Next.js에서 동적 라우팅은 URL 경로가 동적으로 변경될 수 있는 페이지를 처리하는 방식
예를 들어, /profile/[userId]처럼 대괄호([])를 사용하여 동적으로 변하는 경로를 정의

동적 라우팅에서 params를 가져오는 도중 다음과 같은 에러 메시지가 출력되었다.

"Type 'UserProfileProps' does not satisfy the constraint 'PageProps'."
"Type '{ userId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]"

이 문제에 관한 검색을 실행한 결과 비동기 페이지 라우팅 관련 공식 문서를 찾을 수 있었다.
Next 15버전 동적 라우팅 관련 공식문서

Next.js 15로 업그레이드되면서 동적 라우팅 처리 방식이 변경되어 params와 searchParams가 Promise로 반환되며, 이를 처리하기 위해 await을 사용해야함.
이전에는 동기적으로 데이터를 사용했으나, 이제 비동기 처리 방식으로 Promise를 await하여 데이터를 사용.

기존 코드

import { UserProfileContent } from '@/components/UserProfile/UserProfileContent';
import { UserProfileHeader } from '@/components/UserProfile/UserProfileHeader';

interface UserProfileProps {
  params: {
    userId: string;
  };
}

export default async function userProfile({ params }: UserProfileProps) {
  const { userId } = await params;

  return (
    <div className="flex min-h-screen w-screen flex-col gap-16 bg-custom-white-100 p-16 md:px-200 xl:px-400 2xl:px-650">
      <UserProfileHeader userId={userId} />
      <UserProfileContent />
    </div>
  );
}

변경된 코드

import { UserProfileContent } from '@/components/UserProfile/UserProfileContent';
import { UserProfileHeader } from '@/components/UserProfile/UserProfileHeader';

interface UserProfileProps {
  userId: string;
}

export default async function userProfile({
  params,
}: {
  params: Promise<UserProfileProps>;
}) {
  const { userId } = await params;
  return (
    <div className="flex min-h-screen w-screen flex-col gap-16 bg-custom-white-100 p-16 md:px-200 xl:px-400 2xl:px-650">
      <UserProfileHeader userId={userId} />
      <UserProfileContent />
    </div>
  );
}