#NextJS asynchronous params
Unanswered
censmart posted this in #help-forum
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
@censmart What happens if you have to pass your params to a client component, how do I annotate the type on the client component
You'll have to create the type on client, and set that type as arguments
-# page.tsx
-# ClientComponent.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@Anay-208 | Ping in replies -# page.tsx
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
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
censmartOP
This is for version 14, I am referring to version 15 that is now asynchronous
As far as I know, Client components can't be async In next 15.
In canary, there is a function
Ping when you'll reply
In canary, there is a function
usePing when you'll reply