Next.js Discord

Discord Forum

#NextJS asynchronous params

Unanswered
censmart posted this in #help-forum
Open in Discord
Avatar
censmartOP
What happens if you have to pass your params to a client component, how do I annotate the type on the client component

5 Replies

Avatar
Anay-208
You'll have to create the type on client, and set that type as arguments
Avatar
censmartOP
Can I see a code sample
Avatar
Anay-208
-# page.tsx
import ClientComponent from './ClientComponent'

const ServerComponent = async ({ params }: { params: { id: string } }) => {
  return (
    <div>
      <h1>This is a Server Component</h1>
      <ClientComponent id={params.id} />
    </div>
  )
}

export default ServerComponent


-# ClientComponent.tsx
'use client'

import React from 'react'

interface Props {
  id: string
}

const ClientComponent: React.FC<Props> = ({ id }) => {
// or const ClientComponent =  ({ id } : Props ) => { 
  return (
    <div>
      <p>Parameter ID: {id}</p>
    </div>
  )
}

export default ClientComponent
Avatar
censmartOP
This is for version 14, I am referring to version 15 that is now asynchronous
Avatar
Anay-208
As far as I know, Client components can't be async In next 15.

In canary, there is a function use

Ping when you'll reply