docs: Provide examples using tRPC with Next.js app router

[Pavan-Rajesh]

Area of Improvement

Only tRPC using page Router in Next.js are present in your documentation. Please Provide Examples for tRPC using Next.js app Router

Link to related docs

https://trpc.io/docs/client/nextjs/setup

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR implementing the suggested changes!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[maryamkhan14]

Seconding this! It's been hard to find any authoritative sources on TRPC usage with the App Router.

[ramoneres]

Yes, please. I'm going crazy here trying to prefetch an infinite query and I'm not smart enough to figure it out myself. Anyone got some example code for how to get it to work? I've seen some examples where they use an server side helper, call prefetchInfinite, dehydrate the queryclient, then pass it to a HydrationBoundary. But yeah, can't get it to work.

[oeuvars]

Hey @maryamkhan14, you can refer to this video https://www.youtube.com/watch?v=qCLV0Iaq9zU to set up trpc with Next.js App router, also you can go to my repositories and check the Pestile repo which is set up using Next.js app router with Trpc.

[Pavan-Rajesh]

This can help you and I will be writing a blog article by today

This is minimalist example and very easy to understand

https://github.com/Pavan-Rajesh/tRPC-Nextjs-App-Router-Minimal.git

Some of the things in the above video are deprecated and some of the docs are also deprecated but vscode helped me ^-^

[jeffrey-computers]

Bump. Also relates to #5625

I can find no explanation anywhere for how to cache trpc endpoints when using the NextJS App Router

[iduuck]

@jeffrey-computers I think Nick Lucas (don't want to ping him here) mentioned on twitter, that the documentation is not being updated until v11 is released: https://x.com/NckLcs/status/1788275302340100304

[KATT]

I think the closest thing to what we want to recommend if you have a monolithic app is to use @trpc/server as a slim data layer on top of your backend - you can see that here (in this specific directory) https://github.com/trpc/examples-next-app-dir/tree/main/src/app/posts

If you're running a separate service for your api layer, it'll likely look quite different. If you are making an SPA, it looks more like how it always has.

It's hard to know what people actually expect and how people want to use trpc for in this new world where React, since RSC and server actions, solves a lot of the things that trpc was created for.

[ivan-kleshnin]

It's hard to know what people actually expect and how people want to use trpc for in this new world where React, since RSC and server actions, solves a lot of the things that trpc was created for.

T.b.h. I used neither NextJS + actions nor TRPC yet, besides a couple of sandboxes (used Zodios more). Still, here's my take on why I'm still interested in TRPC and why I'm not as hyped about RSC and Server Actions as many:

	NextJS + RSC + Actions	TRPC + React Query
Flexibility	Locked into a single framework	Compatible with any TypeScript backend
State Control	BE (faster first load)	FE (faster interactions, flexibility)
API Consumers	Single	Multiple
Data Sharing	Via prop drilling	Via prop drilling or React context
Server Architecture	Optimized for Edge/Lambda	Our choice
Server Features	No context, weak middleware, manual validation	Context, powerful middleware, integrated validation
Client Features	No extra features	Extensible client

For me, State Control is the most important part. When doing frontend-dev, I've been building mostly admin panels these days. Around 2020–2021 NextJS has started to move away from SPA mindset (heavy-interactive), and cater more to heavy-content customers like E-Commerce and image/video platforms. They optimize first load "at all costs" but the first load does not matter nearly as much for interactive apps like games, CMS', etc. Consequent loads and UX performance matters more... and that part was completely ignored (until React 19 that, at least, cleans up long-staled internals and fixes memoization routine). Vercel is free to pursue their business goals, of course, but engineers know that "heavily optimized for X" is inevitably "suboptimal for Y".

Cache invalidation (that NextJS wants me to perform on the server) couples actions to frontend URLs making them barely reusable and/or requires even more wrapping code. Invalidation via tags is rudimentary, the whole thing doesn't stand a comparison with React-Query' rich cache and invalidation functionality. The lack of features on the server and on the client, by contrast to what we used to have with separate API server + e.g. TRPC, is deal-breaking for us. And it can't be easily fixed, IMO, due to their implementation decisions.. Maybe on NextJS v20, who knows 😅