moai-lang-typescript

Initialize tRPC with initTRPC.context using a Context type, define routers with publicProcedure and protectedProcedure, and expose them via an app/api/trpc/[trpc]/route.ts handler. On the client, wrap your app with trpc.Provider and QueryClientProvider in a providers.tsx client component.

Server Components are the default in the App Router and can directly await data fetching without useEffect. Client interactivity requires the "use client" directive, and the use hook lets client components unwrap promises passed from server components.

The satisfies operator checks that a value conforms to a type without widening its inferred type. For example, an object satisfying Record<Colors, string | number[]> keeps each property's literal inferred type, so array methods remain available on array-valued properties.

TypeScript interfaces only check types at compile time and disappear at runtime, while Zod schemas validate actual runtime data from forms or API requests. Use z.infer to derive the TypeScript type from a Zod schema so both stay in sync.

Yes, Server Actions are defined in files marked with the "use server" directive and can be passed directly to a form's action prop. Combine them with useActionState for pending states and Zod safeParse for server-side validation before database writes.

The protectedProcedure middleware throws UNAUTHORIZED when ctx.session.user is missing, meaning the request lacks a valid session. Verify that getServerSession is called in your context creation and that the client sends authentication cookies.