Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.
To show an examples of the many variants an implementations here is an example:
In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using
In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using
Main Concern: I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question: Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
import { createTRPCNext } from '@trpc/next'; And this is for nextjs Page router.In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using
import { createTRPCReact } from "@trpc/react-query"; The T3-OS seems to be the closest to what I want, but they don't use clerk. And The repo the reference for clerk auth is out of date.Main Concern: I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question: Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Solution:Jump to solution
@DiamondDragon @makistos @here
1. Sorry I didn’t see these notifications earlier!
2. Like 90% > are using NextJS (Page) & TRPC.
3. NextJs (App) & TRPC require a different configuration....
3. NextJs (App) & TRPC require a different configuration....
12 Replies
Okay so createTRPCNext is not compatable with next 13 or 14 got it.....fuck that is annoying. Docs are out of date yo
Or at least app router
Seems like I'm not the only one struggling with this. I'm trying to get SSR to work and even after enabling it I get an unhandled error that I shouldn't be using useState unless it's a Client Component. And this useState is somewhere inside trpc.
I think I got the switch to app router done, basically replace "pages" with app and the file structure is good to go but instead of _app.tsx you need to add the withTRPC wrapper to layout.tsx. There you export trpc.withTRPC(RootLayout).
Having read through the questions in this topic I don't think tRPC is a good choice with NextJS unless you are very knowledgeable about both. There seems to be lots of difficult issues that no-one can solve at the moment.
createTRPCNext is mainly for the page router from my understanding, a lot of stuff intended for the app router haven’t been finalized.
Ok, so tRPC is not really usable right now if I want to start a new NextJS project.
It is, there is just a lot that is unstable or unreleased. You can use SSR in client components the way Makistos mentions, and you can use createCaller in server components.
Problem is if and when I hit some snag I'd be pretty helpless because I'm not familiar with tRPC or SSR - something that already happened in fact.
Documenso is using tRPC and Next14 in prod. Check their github. There are enough examples to fight through all the challenges.
GitHub
GitHub - documenso/documenso: The Open Source DocuSign Alternative.
The Open Source DocuSign Alternative. Contribute to documenso/documenso development by creating an account on GitHub.
Ok, that looks useful. I'll have a look.
Sorry to Max for hijacking your thread but hope that repository helps you too.
And immediately I run into the same problem someone else here also had (and no-one had a solution) that transformer in createClient has moved somewhere else.
Documentation unfortunately is next to useless. I can see exactly the same stuff in my IDE with code completion, i.e. there is absolutely no documentation in the documentation. For instance, tRPC examples tell to use createTRPCNext, but documenso doesn't use it. So what is it for? No idea because documentation only tells there is a function called it. It doesn't explain what it does or what the parameters do.
I tried to fix the issue above and just got even harder issues. I assume transformer needs to be moved under links; httpLink (or httpBatchLink - what's the difference? Docs don't tell) but now I apparently need to define a transformer in my initTRPC-object first - I guess this should be in the initTRPC.create() function but I copied that from tRPC's example and there are no parameters used there. So what am I supposed to do here?
@Max been working on this stuff today and am also confused af
Solution
@DiamondDragon @makistos @here
1. Sorry I didn’t see these notifications earlier!
2. Like 90% > are using NextJS (Page) & TRPC.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
@here thanks. I have been working on a cloudflare kind of template based heavily off create-t3-turbo but seem like i'm able to use trpc both server and client side. not sure all of the specifics and things to be aware of but am learning next and trpc
https://github.com/austinm911/next-expo-cloudflare-monorepo-template/tree/trpc
GitHub
GitHub - austinm911/next-expo-cloudflare-monorepo-template at trpc
Contribute to austinm911/next-expo-cloudflare-monorepo-template development by creating an account on GitHub.