Next.js Server Action to TypeScript

Paste the JSON object your Next.js Server Action receives and get a TypeScript interface for the action's argument or for the parsed FormData. Works with App Router 'use server' actions, useActionState, and route handlers.

JSON input valid
TypeScript output

      
    

About this conversion

Server Actions in the Next.js App Router are functions tagged with 'use server' that the framework exposes as POST endpoints under the hood. Whether the caller is a <form action={action}> submission, a useActionState hook, or a direct fetch from a non-Next client, the bytes that hit the action are JSON (or a FormData converted to a plain object). Typing that argument by hand drifts: you forget a field, you mistype a nested object, you can't tell which fields the form really sends. Pasting the actual JSON your action consumes gives you an interface that matches the wire format exactly.

Drop the generated interface in as your action's parameter type. From inside the action body, every field autocompletes — no `as` casts, no implicit any, no surprises when the form adds a field. Pair it with the same-shape Zod sibling page if you also want a runtime parse at the action's entry; the TypeScript interface tells your code what to expect, the Zod schema validates that the bytes match. For Server Actions called from forms, react-hook-form, or untrusted clients, that pairing is the boundary you want.

Same shape, other validators

Other JSON shapes