TypeScript Tips for React Server Components

Server components change what your types mean. A prop that was always serializable now must be, and params arrive as promises. These are the habits that keep a mixed server/client codebase calm.

Type the boundary, not the internals

Mark client components explicitly with "use client" and type their props as plain data. Everything crossing that line must survive serialization, so prefer strings, numbers and plain objects over class instances.

Async params are a promise

In Next.js 16, page props arrive asynchronously. Typing them correctly removes a whole class of runtime surprises:

interface PageProps {
  params: Promise<{ locale: string; slug: string }>;
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;
}

Let messages travel as props

Localization loaders are server-only. Passing resolved message objects into client components keeps translations out of the client bundle and the types honest.

Checklist

• Props crossing the server/client line are plain data
• Params and searchParams are awaited and typed as promises
• View models come from the repository, never raw rows