This is a small proof-of-concept showing how to get tRPC working with the Next 13 app directory, all in TypeScript. All of the code is drawn from the tRPC tutorial, here, and here. Some attempt has been made to minimize the example code.

Note this code contains only an example of performing an RPC from a Client Component. I am not sure how to get tRPC calls working from a React Server Component, tbh, but it seems like this is an area of active investigation.

Running

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result. A simple page displays the result of a tRPC call. You can edit MyRpcClientComponent.tsx to change the query being made, or trpc-server.ts to change the "API" and see that the client and server both fail to compile.

Recreating

npx create-next-app@latest --experimental-app trpc-next
cd trpc-next/
npm install @trpc/client @trpc/react-query @tanstack/react-query @trpc/server zod

This should be the basics needed if you want to incorporate this into an existing project.