Next.js app router + TRPC...how to set it up?

Note You can already use tRPC with app directory, by:
>
- using @trpc/client directly in components (both RSC and non-RSC) - use @trpc/next for client components
I saw this written in the readme of the example-next-app-dir What does this mean? How can I set it up?
Aleed.dev
Aleed.devā€¢267d ago
hey you can watch this video it explains how to setupd trpc with app router https://www.youtube.com/watch?v=qCLV0Iaq9zU&t=0s
Jack Herrington
YouTube
tRPC + NextJS App Router = Simple Typesafe APIs
Upcoming course: pronextjs.dev šŸ‘‰ Code : https://github.com/jherr/trpc-on-the-app-router šŸ‘‰ Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ šŸ‘‰ Discord server signup: https://discord.gg/ddMZFtTDa5 šŸ‘‰ VS Code theme and font? Night Wolf [black] and Operator Mono šŸ‘‰ Terminal Theme and font? oh-my-posh with powerlevel1...
Vilian
Vilianā€¢267d ago
This doesn't showcase how to implement context
DrippyDog
DrippyDogā€¢264d ago
no context still
A. Perkamentus
A. Perkamentusā€¢263d ago
See the code from the T3 Turborepo. https://github.com/t3-oss/create-t3-turbo
More Posts
How do I setup App router + TRPC + Lucia Auth? (protected routes)I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I mNEXT.JS / Serverless AWSConfigured trpc locally. Everything works great. When deploying via serverless on aws - mutations doHow do I set a context dynamically?I don't fully understand middleware in trpc and especially using it for adminProcedures. So my trpcHow to make LoaderAndError component which is type safe?I i have a query like this `const { data, isLoading, isError } = trpc.settings.get.useQuery();` NowTRPC vanilla client load failed when called on mobile browserHi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { cre`createCaller` and RSC - with next-authI've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-auuseQuery always fetching when active on pageHi, I was call my procedure like this, using NextJs (page directory) const { isLoading, isError, isSnextjs app router `fetchRequestHandler`'s createContext doesn't run.Hey there, I have the following code: ```ts // /src/app/api/trpc/[trpc]/route.ts import { fetchRequ"Unable to transform response from server" when 401 error returned from middleware (sometimes)I'm trying to figure out a problem where some (a few, not most) 401 error responses result in an uncHow do pass a 'blob' from frontend to backend?I'm having trouble doing this without converting an audio Blob to base64 and then decrypting it and fetch failed - error on npm start on productionI rebuild my next.js app with the npm run build command and I started it with npm start I get thisType return error when using mongoose.node - v16.15.1 npm I'm somewhat new to trpc. Using it with mongoose. Love it so far althought I douseContext won't infer type from tRPC clientI am calling tRPC endpoints from my app and it's working flawlessly. As you can see on first screensForward client headers with createTRPCProxyClient & Server-Side HelpersWith `createTRPCNext` i had the option to tap into the `context.req` object nextjs passed in, but I