Direct Technical Solution: In Next.js 15, dynamic route parameters (params) and search parameters (searchParams) transitioned from synchronous plain JavaScript objects to native Promises. This breaking change was implemented to support React 19 Server Components and the new Partial Prerendering (PPR) model, where the server renders the static page skeleton before dynamic parameters resolve.

1. Server Component Migration (Async/Await)

In all Next.js 15 Server Components (the default in the app/ directory), type params as a Promise and explicitly await it before accessing any key:

// app/blog/[slug]/page.tsx (Next.js 15 Server Component)
interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function BlogPostPage({ params, searchParams }: PageProps) {
  // Await the asynchronous params promise
  const { slug } = await params;
  const resolvedSearchParams = await searchParams;

  return (
    <main style={{ padding: "2rem" }}>
      <h1>Article: {slug}</h1>
      <p>Tracking Tag: {resolvedSearchParams.ref || "Direct Visit"}</p>
    </main>
  );
}

2. Client Component Migration (React 19 `use()` Hook)

If your page file uses "use client", you cannot make the component function async. Instead, unwrap the params Promise using React 19’s native React.use() hook:

// app/dashboard/[userId]/client-page.tsx
"use client";

import { use } from "react";

interface ClientPageProps {
  params: Promise<{ userId: string }>;
}

export default function UserDashboard({ params }: ClientPageProps) {
  // Unwrap the promise synchronously within render
  const { userId } = use(params);

  return <div>Active User Session: {userId}</div>;
}

3. Comparison: Next.js 14 vs Next.js 15