TypeScript Best Practices for React and Next.js

TypeScript pays for itself the moment your app grows past a few files. These practices keep the types helping you instead of getting in your way.

Let inference do the work

You don't need to annotate everything. Let TypeScript infer return types and local variables; annotate the boundaries — function parameters, props, and public APIs. Over-annotating adds noise and can actually hide better inferred types.

Ban `any`, prefer `unknown`

`any` disables type checking and quietly spreads through your code. When you truly don't know a type — parsing JSON, handling an external payload — use `unknown` and narrow it with a check or a schema. Your data stays honest.

Validate external data at the edge

• Parse form data, API responses, and webhooks with a schema library like Zod.
• Turn untyped input into a typed value once, at the boundary, then trust it inside.
• Never assume `formData.get()` returns the shape you expect — validate it.

Type server actions and props precisely

Give server actions explicit parameter and return types so the client knows exactly what it's calling. For component props, prefer specific unions over broad strings — `"draft" | "published"` catches typos that `string` never would.

KitCraft templates are fully typed end to end — no `any`, validated inputs, and precise props and server actions — so you can read the code as living documentation of the patterns.