Scaffold Next.js 14 Backend in Seconds (Prisma, Drizzle, Server Actions)

most of my kieras demos have been focused on the power kieras brings to the view layer um but behind that are two very important pillars being the the models that are being scaffolded as well as the controllers and I think there's a super powerful use case for kiras that leaves you with very simp simple modular uh building blocks that can help you continue to build super fast while not necessarily bringing maybe some of the the bloat that could happen when you're generating the the view the view and and UI layer as well uh so to Showcase this I'm going to do a really really quick demo code walk through um for an app here I've scaffolded everything with gas so we're using Shi nuui Prisma and Luchia with SQL light um and the IDE is they're very basic but let's just scaffold out a to-dos model and show you what that provides you um to help you build faster so I am going to stop the dev server quickly I jump back here and we're going to run kiras generate if I can spell we're going to generate the model and the controller no View today we are going to generate server actions as well um so we're going to call this to-dos has to be plural every to-do is going to have content uh which is required and then every to-do is going to have a Boolean value of whether it's completed or not uh which is required no other fields no index timestamps belongs to the user um but no child models great uh one thing I'm going to do quickly is head into the schema I mean we can see what it's done roughly this was that model you can see git is showing us that this is newly added to the file uh we've got an ID content completed uh related to the to the user and then uh time stamps here which is great uh I'm going to just add a default value here to say that it's false um and then we are going to run Bund DB generate and Bund DB push and rather than necessarily running and building something out I just want to show you how the the amazing Primitives that this provides under the SCH so you can see that uh it's created a few things we've got a new file in the schema fold fer which provides us with a bunch of Zod schemas um that are ready to go as well as types um so to use in your components new Todo it emits the the ID as well as the Tim stamps ready to go uh same with a Zod schema so for front end validation you'd be using this insert Tod do prams on the back end you'd be using this insert to do schema uh making sure that you're passing everything necessary in the right format uh to your back end um we also will create for you the um query and mutation functions for basic cred for those to-dos so you've now got a get todos function super simple call to the to the user session then a Prisma call to find many to-dos where uh the session is where the user ID is equal to the session as well as finding a to-do by the ID again nicely typed in here um as in terms of input to the function uh as well as going through that um a Zod schema to to pars and make sure that you have the correct fun uh correct value that's going to eventually be passed to your database um we've also got the mutations are awesome because this is usually one of the more painful things to do properly and here again we've got uh the function is typed properly we're doing a call to the session off then we go in and pass in we get uh a guaranteed safe object uh by using Zod um again here because this is the insert Todo schema it will have I think everything except for the the uh the time stamps um so it's just it's really easy it works right away um and then so what does that mean that means that you can go let's just go to our um our app and then uh the app folder and maybe just go to the root uh dashboard uh just to show you let's say you want to get your users to-dos in here all you have to say I mean thinking really in in plain English is I want to get my to-dos you don't have the pass your session in here that's being done right in the query and you're getting returned your to-dos like that easy let's let say you have a button or form and you want to return you want on uh on submit you want to create a to-do what would you do you'd write a wait and then create Todo and see what you've got oh there's a create too action let me pull that in what does it take in well it takes in an input which is uh which is an object that has a Content which is of type string and completed which is of type Boolean and it returns a a a promise which will have a string um and that string will if we go will return uh a string if there's an error otherwise it won't return anything and so these things are just here it is right here uh so these things are just done for you so you can now instead of thinking of this entire backend layer you're starting to think a bit in in pseudo code and so yeah I think this is super powerful again it doesn't add much bloat that was three or four files but they're done with best practices in mind um meaning that you can then focus on the most important part of your application your UI and and your user experience and uh and know that things are already again done with best practices in mind uh so you get to focus on the fun stuff so yeah think you'll love it check it out show me what you build and have fun

Channel: Nico Albanese

Views: 1,511

Keywords:

Id: ehB3T_KwvVE

Length: 5min 9sec (309 seconds)

Published: Wed Feb 28 2024