How to generate typescript types for next.js server component data
- Step 1Log the data-fetching result — In a Next.js Server Component, temporarily add console.log(JSON.stringify(data, null, 2)) to capture the full data shape from your fetch, database query, or CMS API call.
- Step 2Generate the TypeScript interface — Paste the logged JSON and convert. The generated interface is ready to use as the return type for your data-fetching function.
- Step 3Type the data-fetching function — async function getPageData(): Promise<PageData> { const res = await fetch('...'); return res.json(); }. Pass the typed result to the Server Component's JSX.
- Step 4Use in Client Component boundaries — When passing typed server data to Client Components, mark the props as the serializable subset of the interface — exclude any Dates or non-serializable values. Use JSON.parse(JSON.stringify(data)) to ensure serializability.
Frequently asked questions
How do I type the params and searchParams in a Next.js dynamic route Server Component?+
Next.js provides built-in types: type Props = { params: { slug: string }; searchParams: { [key: string]: string | string[] | undefined } }. Generate interfaces using this tool for the data fetching results, not for params — params types come from the Next.js framework types.
Can I use Date objects in the generated TypeScript interfaces for Server Components?+
Not when passing data to Client Components. Server-to-Client serialization converts Date objects to ISO strings. The generated type from JSON will show a string type for Date values (since JSON dates are strings), which is the correct type for serialized data.
Is the Server Component data transmitted to JAD Apps?+
No. Conversion runs entirely in your browser. Server Component data and database results are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.