How do we type annotate props for a server component in NextJS? | Next.js | Page 1

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

In Next.js, when passing data between a Server and Client Component through props, the data is serialized (converted to a string) for use in the browser. However, it does not need a special type. It’s typed the same as passing any other props between components.

For example, if you are passing a Server Action to a Client Component as a prop, you might do something like this:

import { ExampleClientComponent } from './components/example-client-component.js'
 
function ExampleServerComponent({ id }) {
 async function updateItem(data) {
 'use server'
 modifyItem({ id, data })
 }
 
 return <ExampleClientComponent updateItem={updateItem} />
}

In this example, updateItem is a prop being passed to ExampleClientComponent. The type of updateItem would be the same as the type of the function updateItem in ExampleServerComponent.

If you are using TypeScript, ensure you are using TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher to avoid any type errors when using async Server Components.

#How do we type annotate props for a server component in NextJS?

For more details, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/configuring/typescript).

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