Next.js 15 new way of params and searchParams async and have typescript problem when passing

[ruby nebula]

I have a problem in Next.js 15 when i try to pass params from the page.tsx a RSC to a client component the typescript complains because now page.tsx and stuff like params and searchParams are now async fix it

export default async function Page(props: { params: Promise<{ crewId: string }> }) {
const params = await props.params;
return <CrewPage params={params} />;
}

[keen topaz]

Hi @ruby nebula. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To address the TypeScript issue you're encountering with params in Next.js 15, you need to adjust your code to handle the new asynchronous nature of params and searchParams. Here's how you can fix it:

1. In your Server Component (page.tsx):

export default async function Page(props: { params: Promise<{ crewId: string }> }) {
    const params = await props.params;
    return <CrewPage crewId={params.crewId} />;
}

2. In your Client Component (CrewPage.tsx):

'use client'

import { use } from 'react'

interface CrewPageProps {
  crewId: string
}

export default function CrewPage({ crewId }: CrewPageProps) {
  // Use the crewId prop here
  return <div>Crew ID: {crewId}</div>
}

This approach resolves the TypeScript issue by:

1. Awaiting the params promise in the Server Component (page.tsx).
2. Passing only the necessary data (crewId) to the Client Component.

The key changes are:

• In the Server Component, we await the params promise and extract the crewId.
• We pass only the crewId to the Client Component, not the entire params object.
• The Client Component receives a plain string prop instead of a Promise.

This solution aligns with the new asynchronous nature of params and searchParams in Next.js 15, as described in the Next.js 15 Upgrade Guide (https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams).

If you need to use the params directly in a Client Component, you can use React's use function as shown in the Next.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/page#examples):

'use client'

import { use } from 'react'

export function CrewPage({ params }: { params: Promise<{ crewId: string }> }) {
  const { crewId } = use(params)
  return <div>Crew ID: {crewId}</div>
}

This approach allows you to handle the promise directly in the Client Component.

Remember, these changes are part of the breaking changes introduced in Next.js 15 to improve flexibility and enable new features in future versions Next.js 15 Release Notes (https://nextjs.org/blog/next-15#async-request-apis).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: