Next.js15의 params와 searchParams

서론

next.js 15가 나오면서 많은 변경점들이 있습니다.

그 중 마이그레이션 과정에서 가장 처음에 나온 오류가 params와 searchParams입니다.

버전별 비교와 사용법에 대하여 이야기 해보겠습니다.

Next.js14

next.js 14에선 동기적으로 page.tsx 레벨에서 props와 searchProps를 지원 해줬습니다.

따라서 우리는 아래와 같은 방법으로 component 레벨에 props와 searchProps를 전달할 수 있었습니다.

const ConsultingPage: FC<ServerComponentPropsType> = (prop) => {

  return <ReservationDetail searchParams={prop.searchParams} params={prop.params} metaData={initialData} />;
};
export default ConsultingPage;

TS

export interface ServerComponentPropsType {
  params: { [key: string]: string };
  searchParams: Record<string, string | string[] | undefined>;
}

Next.js15

하지만 15버전에서는 좀더 원활한 초기로딩속도를 개선하기 위하여 props와 searchProps가 Promise객체로 들어오기에
사용방법이 조금 변경되었습니다.

아래와같이 Promise객체로 전달되기에 async와 await으로 받아주어야 합니다.

const ConsultingPage: FC<ServerComponentPropsType> = async (prop) => {
  // 변경 위치
	const searchParams = await prop.searchParams
	const params = await prop.params
	
  return <ReservationDetail searchParams={searchParams} params={params} metaData={initialData} />;
};
export default ConsultingPage;

TS

export interface ServerComponentPropsType {
  params: Promise<{ [key: string]: string }>;
  searchParams: Promise<{ [key: string]: string }>;
}