Next.js Discord

Discord Forum

#NextJS asynchronous params

Unanswered
censmart posted this in #help-forum
Open in Discord
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

-# 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
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