Generate TypeScript Types for Next.js Server Component Data

A CMS/page response becomes the return type of your getPageData() helper, and inference carries into the component's JSX.

Input (logged fetch result):
{ "title": "Hello", "author": { "name": "Ada" }, "publishedAt": "2026-06-10T00:00:00Z" }

Output (rootName: PageData):
export interface PageData {
  title: string;
  author: Author;
  publishedAt: string;
}

export interface Author {
  name: string;
}

// async function getPageData(): Promise<PageData> { ... }

An ORM may hand you a Date, but once logged via JSON it's an ISO string — and the generated string type is exactly what a Client Component receives after serialization.

Server query (in memory): { createdAt: Date }
Logged as JSON:           { "createdAt": "2026-06-10T12:00:00.000Z" }

Generated type:
export interface Row {
  createdAt: string;  // correct for the serialized Server→Client prop
}

// new Date(row.createdAt) inside the Client Component if you need a Date.

A posts index returns an array; set a descriptive root and get a single item interface to annotate the list.

Input (GET posts):
[ { "slug": "a", "title": "A" }, { "slug": "b", "title": "B" } ]

Output (rootName: Post):
export interface PostItem {
  slug: string;
  title: string;
}

// async function getPosts(): Promise<PostItem[]> { ... }

An unset CMS field returns null, generating the literal null; widen to the real nullable type by hand.

Input:
{ "title": "Hello", "coverImage": null }

Output (verbatim):
export interface Root {
  title: string;
  coverImage: null;
}

Hand-edit:
export interface PageData {
  title: string;
  coverImage: string | null;  // image URL or null
}

Generate types for the data, not for route params — Next.js provides those built-in. Note App Router params are async (Promise) in current versions.

// Do NOT generate this — write it from Next.js types:
type Props = {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [k: string]: string | string[] | undefined }>;
};

// DO generate the data shape:
export interface PageData { /* from your fetch result */ }

JSON has no Date type, so timestamps become string. Because Server→Client props are JSON-serialized, a Date becomes an ISO string at the boundary anyway — the string type is the accurate prop type. Call new Date(value) in the Client Component if you need a Date object.

Route params and searchParams types come from Next.js, not from your data — and in current App Router versions they're Promise-wrapped. Write those by hand and use this tool only for the fetch/query result types.

A list result infers its item interface from the first element. Keys exclusive to later items are missing — reorder so the most complete record is first, or paste a merged superset object before generating.

Functions, class instances, undefined, and Map/Set aren't JSON, so they never reach the generated type. That's aligned with Server→Client rules, which forbid passing non-serializable props anyway — keep your prop interface to the serializable subset.

An unset CMS/database field returning null yields the literal null type. Widen field: null to T | null by hand, or capture a record where the field is populated.

Prisma BigInt/Decimal aren't valid JSON and throw on JSON.stringify unless converted first. Whatever you convert them to (string is common) is what the sample contains and what gets typed. Decide the wire form before logging.

If author and editor both contain a profile object of different shapes, only the first Profile interface is emitted and both reference it. Rename one key, or generate the branches separately.

An empty tags: [] becomes tags: unknown[]. Replace with the real element type or capture a response where the array is populated.

When the root is an array, the tool caps the sample by tier (100 free / 1,000 Pro / 10,000 Pro Media rows) before generating. The item shape is unaffected — sampling fewer rows still produces the same item interface from the first element.

Input runs through JSON.parse after trimming. Server logs sometimes wrap the object in extra text or color codes — isolate the pure JSON, or repair with json-format-fixer, before regenerating.