Creating Service Layer in Next App Router

I have a NextJS application that was built with the t3 stack a few years ago on the pages router. I am finally getting around to migrating to the app router and am running into some confusion. TLDR: I would like to build a service layer (basically just a set of functions) to call trpc endpoints that can be reused/called from both my server and client components.

I followed the "Set up with React Server Components" on the trpc v11 docs, and it looks like there are essentially 2 "instances" of trpc that are created, 1 for client components and 1 for server components (

trpc/client.tsx

trpc/client.tsx

and

trpc/server.tsx

trpc/server.tsx

, respectively). Since each of these has a unique way of interacting with the trpc endpoint, and the

server.tsx

server.tsx

file is

"server-only"

"server-only"

and cant be used in my client components, I'm not sure how I can go about making a service layer that is reused between client and server components.

My existing service layer handled the trpc call as well as other conversions to FE models, so I would really like to avoid duplicating this work from client and server components if possible. Does anyone know how I can achieve this?

Creating Service Layer in Next App Router

Similar Threads