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