next/async-params

Dlaczego

Since Next.js 15 the params and searchParams props are promises; 15 still allowed reading them directly as a temporary bridge, and 16 removed it. Code such as params.slug now reads a property of a promise: it is undefined, the page renders the wrong item or a 404, and TypeScript only catches it when the props are typed as promises.

Poprawka

const { slug } = await params in an async Server Component (and in generateMetadata); in a Client Component page, const { slug } = use(params). Type the props with the generated helpers (PageProps<'/blog/[slug]'>, LayoutProps) from npx next typegen, or run the next-async-request-api codemod. generateImageMetadata and generateStaticParams keep synchronous values.

Przykłady

// bad
export default function Page({ params }) { return <Post slug={params.slug} /> }
// good
export default async function Page({ params }: PageProps<'/blog/[slug]'>) {
  const { slug } = await params
  return <Post slug={slug} />
}

Źródła

• Next.js docs, Upgrading to version 16 (Async Request APIs, breaking change)
• Next.js docs, page.js (params and searchParams props)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain next/async-params