Learn tRPC and Prisma Integration in Next.js 14 (app directory)

Watch this tutorial for step-by-step instructions and start building your own efficient and powerful fullstack app today!

⚔️ Join The Horde

00:00 Introduction
01:11 tRPC Init
02:50 App Router
08:02 API Handler
09:32 Provider
13:18 First Test
15:21 Prisma Init
16:39 Schema
18:20 Prisma DB Calls
20:11 Frontend part
22:43 Final Test
24:05 Refresh
25:00 Conclusion

#nextjs #trpc #prisma #userendpoints #fullstack

[khaledjavdan]

Exactly what I needed: Fast, On point, and very clear explanation. Thank you so much Uros

[hooyah]

i like the way you explain. you write almost same as trpc docs. make me more understand

[rvgjccr]

Finally someone created great tutorial for these tech stack 🤩

[oduber.vasquez]

Greetings and thank you very much for that contribution

[Jacob-uyox]

This is a good video, the showcase is simple and straight to the point. However I think it lacks on a better explanation on how things work. The entire setup that you show was the exact same as in Jack Herrington's video, but with the difference that you didn't enable tRPC with server side rendering. Also around minute 14:40 all of a sudden you turned the Home component to a client component, and for someone who is relatively new on how Next works will see this and will not stop scratching their heads trying to figure out why did you use the "use client" directive (for those who don't know, it's because tRPC uses React Query behind the scenes, and when querying or mutating data, this is being handled by hooks, which are only used inside client components).

I watched this video with the purpose to see how could ssr be enabled with tRPC without the createCaller function, because it is now deprecated. If you happen to know another alternative I would be really thankful (and I guess many other would be as well)

[dev-akeel]

Correction:

0:44 it is not sources directory rather pages router.

[HarshSingh-gktg]

Thanks for the tutorial! Btw one problem in the docs, withTRPC HOC method with pages directory is used how can I implement it in app directory ?

[qazyhn]

even though i totally understand how good is trpc + react query combination, i dont understand using app directory here..
if you are using next app directory you want to go forms, server actions, server components.. and then you dont need TRPC anymore, you already have it with server actions

setting 'use client' on page level is kinda kills the whole idea of nextjs app router
if you want to do this then please use vite + react

[kafukai]

Thank you, this is a great tutorial! If you deploy the app to a server, like vercel, the prisma's file(dev.db) is also updating while we entering inputs? and we can manipulate data from there?

[themusclefairy]

Anybody else facing problem with context just put "use client" at the top of Home page

[gel-tnlg]

I'm following your tutorial up to the part on the 'first test, ' and I encountered this error: 'Unhandled Runtime Error: Error: Cannot read properties of undefined (reading '_context').

[sutharjay]

Unfortunately I am getting createContext error 😢