Mastering Prisma with Next.js A Comprehensive Guide | Prisma Setup, Configuration and Usage Tutorial

welcome to nextg in this video we'll learn about what is Prisma so Prisma is basically an object relation model which allows us to interact with our database in more intuitive and secure way what I mean by that is as you can see here there is a client which sends a request to the server so earlier what we would do here is the server will interact with the database and generate the response so instead of that what we are doing with the Prisma is we are our server is using Prisma to interact with our database and generate response so all the query optimization will be done by the Prisma and overall efficiency of our application will be much improved along with this uh optimization what Prisma allows us to do is migration so what I mean by that is for example you are using a different database right now for example you're using postr SQL and in the future you want to switch to mySQL database so if you are not using Prisma so you have to change your whole code code base but with the help of Prisma what you just what you can do is you can just change the name of the provider as you can see here this is the basic schema of Prisma so right now they're using post gra SQL so what you could do here is you could just change the name to mySQL and with that you will be easily able to migrate to a new database so it's that easy with the help of Prisma and it saves your lot of time and development cost so let's get started so right now I'm in a new nextjs file and in order to install Prisma what I would do here is I would write npm install Prisma that's it and it would start the installation of Prisma so after the installation what I would do here is I would initialize my Prisma so for that I would write npx in it Prisma and also with this okay my bad I have return it incorrectly it's npx Prisma in it and also with this you could provide your data source provider so what I would do here is I would write data source provider SQ light it's not mandatory by default it would use post Grace SQL for this tutorial I want to use SQL so after initializing your Prisma what you could see here is you have a Prisma folder inside you have schema. Prisma you also have a warning here which says that your git ignore file don't have en EnV so I need to add as you can see it's subract there so to remove that what I would do here is I would write EnV and save so it would stop tracking my EnV file and what we have here is a Prisma schema in this file you could see here you have a provider which is SQL light which I have provided while initializing and you have a database URL which is in your EnV file so what I would like to do now is I would like to create a model user model this model will have an ID of type string and it would be unique and the default would be uu ID function this function would return us a random unique IDs what else we could have here is we could have a name name of type string email of typ string and image URL of typ string so this field is optional some user will have it some will not so for that I would like to add a question mark which means this is optional and other what I would like to have is a created at created at it would be of type date time and by default it would be now Now function will just add the date at which the this model or this field would be created in our database and one more field is updated at it would be same date time and by uh default we have an updated ad function in our Prisma so whenever it will be updated it would automatically update this fied what else I would like to have is a post model model post and this model will have again an ID similar to this it would have an ID it would have a created at and updated at and other than that it would have a title type string image type string and this could be optional again and uh it could have a description type string I mean this could be optional as well other than that we have to map our user to our post so each user will have a multiple post but one post will belong to a single user so it's one to many relationship for that what I would like to do here is I would create a relation of user of type user and at relation the references what field it would reference from user model is the ID and map that ID to the user ID of this post so for that I would create create a user ID type string and it would map this field user ID I'm still getting an error which uh it says that the user table does not have any post field so I would like to add that so it would be post post type post and it would be an Eric because user can have multiple post but a single post will belong to a single user so as you can see your basic schema is completed now what I would like to do is I would like to push it to my database so in order to push this schema to my database first I would like to generate the schema so for that I would write npx risma generate so it will generate the schema after it is generated what I would like to do is npx Prisma DB push so it will push our schema to our database so once it's done what you could do is you could check your database for that you could write npx Prisma studio so could spin up a port of your database so as you can see here you have a two models which you have recently created first is the user model it have all your table fields and the second is is the post model so if you want to make any change in your schema or change in your database what you could do here is you could go back to your schema and for example I want to add a field in my user model that is is admin is admin would be a Boolean and by default it would be false so to implement this change what you could do here is you could close your terminal and you could run npx Prisma generate just wait for it yeah after it is generated you what you have to do is you have to push this schema to your database so every time you make change in your schema what you have to do is first you need to generate your schema then you need to push it to your schema so if I run my studio again you will see the changes so now if you go to the user model you what you could see here is an is admin field there which was not there earlier so in order to interact with our database using Prisma what we have to do here is we need to install Prisma client which as you can see I've already done so for that you have to write npm and install Prisma SL client and add ad theate in front of it so it will install that package for you so after you have installed this package what I would like to do is I would like to create a global variable for my Prisma so for that I would create a new folder Li in my root directory and in that I'll create a new file database. DS and in this file file to create a global variable I need my Prisma client so Prisma client and I would declare a global variable Prisma that Prisma and the type of this variable would be of Prisma client or undefined initially it would be undefined then it would be of Prisma client so what I would do is I would export con database it would be equal to Global this so for node just to access your Global variable we have a keyword called Global this do Prisma so as you can see it's here the Prisma you have created in your Global variable so if it is not undefined then use this or if it is undefined then create a new Prisma variable by using new Prisma line so it would create a new Prisma line and Export that so why are be doing this because when we are in a local development due to hot reload your browser creates multiple instances of Prisma so in order to avoid that we are creating a global Prisma and we need to do this only when we are in development mode so for that I would write if process do environment dot node environment is equal is not equal equal to production so if it's not production then what you have to do is uh you have to set your Prisma variable so uh for that I will write Global this. Prisma would be equal to Prisma C no sorry it would be DB that's it you are setting your Prisma Global Prisma variable to your database which you have created here so now as your Global Prisma variable is created in order to use that we need to create some apis so in nextjs if you want to create an API you need to create an API folder so let me do that API and in this I would create the route in which I have to go so it would be register first and by the way I have I have created two pages first is the register page and second is post page so register page has this register card uh it is a basic form element as you can see it has some inputs some buttons and register function which just console logs for now and same goes for your post page and this no not this one it's yeah it's here okay so you can see the create post same similar thing it has a console log prev default nothing fancy here just an input and a button so in order to create an API you have to create the API folder then the route which you have to create which is register in this I would create a new file round. TS and in this route what I would do here is I would create a function export a sync function and the type of request will be post request post take a request as a parameter it would be of type request let's wrap this inside a TR catch block and if there is an error also log the error and what you have to do is you have to return and respond response return new next response and give it a message like internal error status 500 and in the tri block what we have to do is we have to extract our name email and image URL from our body so for that you have what you have to do is write const email name image URL just extract these data from request. Json and you have to wait for this so as it is an promise it returns a promise as you can see here so you need to add a wait here so after you have all this you could just add a type check if uh if no email or no name then just return a new next response is saying that all fields are required I know just a basic type check nothing fancy here and the status would be 401 uh should be 400 yeah okay so after that what we have to do is in order to create a entry or a create a field in our database the user field uh what what we could do here is we could use our Global Prisma variable which we have created so I would use that so new user be equal to DB the name of that variable or name of the file which we have exported and uh now we have to select the schema which we have to work on so it's user schema and what we have to do is we need to create something so we we will use create and we need to pass in some data so data data would be whatever value you have to give so name would be name email would be email we have we have image URL and what else we could add here I guess we have all the required Fields here and after that what I would do here is I would also if you want to include all the post that user have right now it is an array of ID so if you want to include the post data as well what you could do here is could give it a comma here and you could write include well it's registering so it won't have it as of now but in future if you want to use this feature what you could do is you could add include and post just pass uh just WR Pro so what it would do is whenever you want to fetch this user along with its post so you could uh write include and it would include all the posts that user have not just the IDS so right now it just register function so we don't need it because the user won't have any post so after creating a new user what we have to do is we need to return a next response next respond. Json and that I would send my new user so this is the basic way of creating a user or creating a field in your database using Prisma so after creating a route what we could do here is we could uh in our register card we need to send some API request to this route before doing that I found an error I have to write here wait because it's a request and now I could go to my register card in this what I would do here is in order to send the API request I need AOS so I would install that npm I exos it will start the installation once it's done then what you could do here is you could import that so import xus from exuse and what you could do here is Con response is equal to a weit Aus do host and the URL which you want to hit so it would be/ API SL register which you have created as you can see here it's SL API then register and after that you need to pass in the some data so it will be name email and image [Music] URL so once you have done that what you could do is you could uh uh redirect your user to your home directory so for that I'm using use router on router is equal to use router then now what you could do do is don't import it from next router import it from next navigation and just push the user to your homepage so let's test this out for that I would write here next genil would be anything ABC gmail.com and image would be just image from from unsplash so if I would hit create as you can see we are in create post to check whether our user is created or not I would again go to my terminal spin up a port for my Prisma so as you can see here you have a new user created with the name next gen mail image is admin false zero post and all the values so congratulations for creating your first entry using Prisma so after creating your first user you could go the similar process for creating a post and fetching a post what I want you to do is take it as an assignment try to implement these functionality by your own just I would give you some hint like if you want to fetch something you could do this again I'm showing it here only on post equal to await again the format of every request would be same just the database the variable you have created then the schema which you want want to work on is post then what you want to do you want to fetch you want to find something find unique find first find many if you want to fetch all the post so you would use find many and if you want to create then create you want to update the post you could use update so what I want is you guys should Implement these functionality by your own if you fail to do so just let me know in the comment section I would upload the whole project on the GitHub so that you could match your work with my work so with that said thank you for watching this video please like And subscribe

Channel: NextGenDev

Views: 110

Keywords: nextjs, node, react, sql, prisma, typescript

Id: 10rBfra6PHc

Length: 19min 33sec (1173 seconds)

Published: Sat Dec 30 2023