[Next.js] used `...params` or similar expression. `params` should be awaited before using its properties.

params should be awaited before using its properties.

params나 searchParams 프롭은 여러 방면에서 제공되어진다. Next.js 15버전에서는 이 api가 비동기적(async await)으로 만들어져있다.
그래서 이를 활용하기 위해선 params 프롭의 타입을 Promise 객체로 선언하고 함수 내부에서 await를 통해 호출하는 방식으로 변경되었다.

// Before
type Params = { slug: string }
 
export function generateMetadata({ params }: { params: Params }) {
  const { slug } = params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = params
}
 
// After
type Params = Promise<{ slug: string }>
 
export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = await params

동기적으로 작동하는 Dynamic Route가 런타임 정보에 의존하는 문제를 해결하기 위해서 바꿨다고 한다.

기존의 동기식으로 운영되는 경우 API에서는 해당 정보를 가져오기 위해 기다렸어야 했다. 이를 비동기식으로 변경함으로서 정보 준비를 기다리지 않고 필요한 시점(await)에 기다리도록 변경한 것으로 보여진다. 성능 향상을 기대할 수 있을 듯 하다.

https://nextjs.org/docs/app/building-your-application/upgrading/version-15