Next.js 15 부터 바뀐 방식

1) async/await

params의 Type은 Promise이다.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
  return <div>My Post: {slug}</div>
}

2) useParams

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)
 
  return '...'
}

참고

• https://nextjs.org/docs/app/guides/upgrading/version-15#params--searchparams
• https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#convention