Let's Checkout... Prisma & Next.js

a few episodes ago we talked about blitz js which is a full stack javascript framework unfortunately blitz.js is still in beta it's going to be in version 1.0 sometimes in april so you can maybe try using it then but in the meantime if you want to build the full stack javascript application using nexjs you can actually just use prisma with it because blitz js is based on nexus and prisma and they're both battle tested so nexjs is used very much by developers and loved very much by developers and uh the same thing goes with prisma io so in this episode i'm just going to show you how you can integrate nexjs with prisma to get your full stack javascript application goal [Music] so what is prisma actually prisma 2. as i heard prisma 2 is much different than prisma one so we are going to of course be using that prisma is next generation orm for node.js and typescript which actually just means that it's going to give you a nice api for you to interact with your database and also to create your database as you will see in this video so help prisma helps developers build faster and make fewer errors with an open source or m for postgres sql mysql and sqlite we are going to be using sqlite in this video i'm not going to spend much time introducing prisma to you but we are just going to start developing stuff first of all we are just going to make a fresh install of nexjs and then we are going to integrate prisma in it and create a little movie app of course we are just going to list the movies i'm going to show you how you can add the movies and how you can get single movie page so first of all we are going to create a fresh installation of next.js and to do that you are just going to do mpx create next app the project name is going to be prisma next and now we just wait a little bit for everything to get installed and download it okay so now we are just going to go cd into prisma next and we are actually going to install prisma so you do mpm install d so it's going to be a developer dependency prisma after that we are going to install prismaclient so you do npm install at prismaclient okay so now that this is done uh there is one more command that we are going to run and that is going to be npx prisma init so we want to initialize prisma in our next.js application so now we are going to open up our project inside of our code editor inside our code editor alongside with normal nexjs files and folders you will have this prisma directory which includes schema.prisma file and you also have this.env file in which you can set up your database url it also has some documentation to explain what this file actually does so first of all we are going to change the provider which is going to be sqlite not postgres sql so it used to be like this so you just change it to sqlite and then you would need to actually create a database since we are using sqlite the database is just going to be a file so we can create it by doing a new file and we are going to call that file database.db okay you can close that file we are not going to be touching it anymore next thing you need to do you need to define where your file lives in your env file so to do that we are just going to set it to be something like file prismadatabase.db save this okay we can also save a schema prisma but nothing is going to happen here because we still haven't created our model and what are models well models are just a description of your data types which are going to be migrated to the database so here you were defined your database tables our model is just going to be called model movie and this is something actually very similar to something like ruby on rails larval or even october cms if you ever worked with it you would have your migrations and you can migrate those migrations inside of your database and in that way you will create the fields in your database that your users can fill out inside of your application so first of all in our model movie we want to have a few fields so the first field is going to be an id field which is going to be an integer and we are going to do this id and then we are going to set its default value to be auto incrementing so you do auto increment because this is just going to be our id field and whenever you add something to your database this number is going to auto increment automatically so the next thing is title so we are creating a movie the movie has a title and it's going to be of type string the year is going to be of type integer and description for the movie is also going to be a string and we are also going to create a slug for the movie because we are going to need that slug so that we can access our single movie page through slug not id so slug is going to be string also okay so we created our model next what we need to do we need to create a migration for from it and migrated inside of our database so as you can see if you click on your database right now is just an empty file now if we go to our terminal and run npx prisma migrate dev we need to add a name of our migration so i'm just going to say first migration press enter and now our database is in sync with your schema so now what we can do we can run something called prisma studio so you do mpx prisma studio and this is going to give you a very nice user interface in which you can actually see your databases so you do mpx prisma studio it's going to automatically open up inside of your browser like it did for me right here and as you can see we have models and all models we only have this one called movie if you click on a movie you can see our field so id title year and description so let's fill out those movies so the title for the first one is going to be fight club the year is 1999 description you can add whatever you want here and the slug is going to be fight club and let's add just a few more movies i'm going to do that behind the scenes okay so now we have our three movies set up we are just going to save those changes and now our database is filled up with some data which we can display in our next.js application okay so now i'm going to clear it out of prisma studio by doing control c and run next.js server so npm run dev once this has been run you can go to localhost 3000 and check out your application as you can see this welcome to next.js screen looks a little bit different because behind the scenes i added some styling inside of global css and home module css you can see all of those files on github the link will be in the description below for now we are not going to concern ourselves with it uh because we are actually just building this application we are not going to concern ourselves with the styling so i'm just going to rename this to be movie list we are doing this inside of index.js file which is inside of our pages right so it's going to be called movie list we are going to remove everything from main so this is the default code that you would get with nexjs and i'm also just going to delete the footer and i'm going to format my document because i don't like the current formatting and that's about it okay so now if we take a look at our web page we don't see anything because we don't have anything uh here okay so let's just try to display some movies first statically and then we are going to get them from prisma so first of all what you need to do we are just going to export async function get server side props we did this a million times in our next.js series then i'm just going to define some data right here uh it's going to be very simple i'm not going to waste too much time on it so i'm just going to say cons data and i'm going to say id1 title and another title just to see how this works and how it's going to change when we add prisma to the mix and of course we wanna return some props so you do return props and we are just going to return the data of course we need to accept that data at the beginning of our function so right here data and here we can display this list we are going to use ul tag for that as you can see i'm getting my styles from that movie list so if you don't know what this does this is going to reference styles that are coming from home module css and in home module css we have something called movie list right so this is just our styling and in it i'm going to map our data so i'm just going to say data dot map item and then here we are going to open up an li tag which is of course going to have a key which is going to be item id that id and here we are just going to display item title okay save this check it out in the browser we cannot read property map of undefined let's try to just refresh this page okay so now it works we have to refresh the page because this is getting this data is coming from server side props so whenever you change something here you actually have to refresh your page so that the server can do its thing okay so this works we are just getting title and another title great uh now we want to get our movies displayed on this page so how do we do that well first of all what you need to do is you need to import prismaclient and you import prismaclient by doing import prismaclient from prismaclient great now you have to new up that prisma client and you do that by doing const prisma is going to be new prisma client and now we have our prismaclient new dub great now we have access to this variable that we just defined called prisma and we are we can use it to get our movies and so how do we get those movies we are we of course need to get them inside of get server side props because prisma works on your server so it works on the back end it doesn't work on your client side so to do that all you need to do is define a variable which we are going to be calling movies const movies and we await and then we do prisma movie because this is the name of our model prisma dot movie and we just do find many and that's about it now all we need to do is change these props a little bit so the data in this case is actually going to be movies and not just this data that we defined right here so we can remove this and as you can see instead of fetching some data from our api we are actually calling prisma and communicating with our database to find our data so we save this and check this out in the browser and as you can see now we are getting fight club american beauty and big lebowski now of course we have some other data in our movies except just for the title so what i'm going to do right here is i'm just going to add this in our ally so we are getting movie title year and description save this and check it out in the browser and as you can see this now works fight club american beauty big lebowski we are displaying all of those okay so the next thing we want to do we want to add a movie to our database as you will see this is also pretty easy to do with prisma so first of all i'm just going to import use state from react we are going to use state from react because we are going to be needing it for our form so we are going to use our state in here we are just going to do const form data and set form data which is going to be using use state and we are expecting an object right here so this is going to be the data that is coming from our form next thing i'm going to add that form right here you don't have to worry about this too much it's going to be available for you on github uh let me just go through this code so that we don't have to write everything by hand so you are defining a placeholder for your fields uh which in this case is going to be a title you have to define a name because this is going to be the name of the data that is coming in and on change we are setting form data and we are getting this object right here and we are adding whatever we get from this field to our form data and we do that for pre pretty much every field except for a year we do that also for the year but you have to be careful for the year you to add this plus symbol right here because this is going to turn our string into a number and prisma is expecting a number for the year so we need to send it a number because if you don't prismo will break and nothing will work and that's about it right so this is our form if we save this right now go to the browser it looks something like this but it's calling this function save movie which we still didn't define so let me just show you how the form works first i'm just going to go to my browser to my code editor and i'm going to create a function called save movie so this is our save movie function it's just accepting an event uh it's preventing default so that our page won't refresh and then we are logging out form data so let's see how this works if we go to our browser as you can see now we can see the form i'm going to open up our console refresh it so there are two children with the same key that's weird item.id okay so we are going to ignore this for now let's just try to add something to our form uh this should be a number and if we click add movie as you can see right here we are getting that movie let me click it again make it a bit bigger so as you can see we are getting the title uh the year the description and the slug so these are all the fields that we want to add to our database once somebody clicks add movie of course this doesn't work just yet because all our save method is doing save move method is doing is just displaying the forum data so let's transform this save movie method to something else we are going to leave prevent default and this should be actually an async function function called save movie and now in that function what we need to do is of course first prevent default then we do response and we are going to be using fetch so we do await fetch and we are going to go to the route called api movies now i'm going to explain what we are doing uh just a little bit later let's just create this with the method is going to be post and we are going to send the body which is going to be json stringify form data and then we are just going to wait for the res for this response to finish so we are going to return response.js okay save this now as you can see we are calling a route called api movies now if you go to your pages you will see that you already have an api folder with hello.js in it this is our api route and these routes work only on the backend or or on the server side and as you can remember as i said before prisma also works on the server side so what we are doing right here is we are sending this data to this server side route which is going to be called movies in our case and there we are going to call prisma again and set that data inside of our prisma database so let's create a new file here which we are going to call movies.js and in that file you will add export default so let me just close this export default we are getting a request and the response and uh we also need to import prismaclient and newer app okay we do prismaclient from prismaclient and then new prismaclient great now we are getting a request to this route this request is going to carry a body in it like we just sent right here so we are sending a body with form data so we are expecting body from this request so if i do const data equals we want to parse that json json.bar request body so this is the data that is coming from our form next thing we need to do we need to add that data to our database so how do we do that you just do const created movie this is going to be the name of our variable we do a weight await prisma dot movie dot create and then you just send in the data that you're getting right here so you just do data and uh you just wanna respond with json created movie so response is going to be jason created movie this should be moving not movies okay save this and this should actually be everything that we need to do so that we can use our form to add movies to our database so let's see if this works we go to our browser refresh this page of course and now i'm going to add the title of a movie which can be matrix the year is going to be 1990 2000 actually let's just put it 2 000 you can add anything to the description and the slug is just going to be matrix and now we click add movie okay we didn't get any errors but as you can see our movie is not showing up right here just yet but if if we refresh the page as you can see the matrix is added matrix movie is not getting added right away because we didn't handle that in our code so let's just handle it quickly right now so if we go to index.js file we are going to define another use state right here which is going to be called movies const movies and set movies okay then we are going to use state and here we are actually going to say data so our movies are our initial movies are going to be the data that we are getting from server side props of course this will not work this will throw an error because here we are mapping through data not movies so let's just change that and say movies and there is one more thing that we need to do so when somebody clicks on add movie we want to add matrix to these movies right here so how do you do that well it's just one liner so below prevent default you just do set movies uh we are destructuring this array and adding whatever we get from from data so when somebody clicks on that we should set up movies before we actually add movie to the database and that movie should show up on our page so let's just save this go to the browser let's test this out once again let me refresh it and i'm just going to add it like this and the slide is going to be test we click add movie and as you can see our movie is added automatically here and if i refresh the page it's going to stay on this page let me just talk a little bit more about these keys error that we are getting right here you would get that error even if this works okay because when you add a movie and that movie is in this list as you can see we are not defining an id here so you you would get an error that this last movie doesn't have a key on it because it doesn't have an id so in that case what you would need to do is use something like uuid or something some other library to create automatically id keys and x actually this is a best practice because if you read the documentation for react and best practices you should actually never use ids for the keys just because situations like this right so when using something uh like a uu id library or any other library similar to it they are going to generate the keys for you and you don't have to worry about this but okay we are going going to ignore that but for now uh we want to link those movies to a single movie page and of course to do that we need the link so we are going to go down here actually we are first of all going to import link from next link and then we are just going to add a link to a movie so we are going to add it below item description just going to paste it in here so we are getting movies and we are sending the item slug so for example if we click on matrix we should go to the url movies slash matrix okay if i save this and go to the browser you can see those links right here and in this left corner left and in this down left corner of the screen if i mouse over it you can see movies test movies matrix movies big lebowski and so on so we want to get that url when user clicks on it of course if i do it right now it's going to get 404 because nothing exists there to handle that behavior so what we need to do is we need to create a slug for our movies and we are going to do it by going to pages and in pages i'm going to create a new folder called movies and in that new folder i'm going to create a new file which is going to be called slug js so this is going to be our dynamic link our dynam dynamic page and if you don't know anything about that please check out my nexjs tutorials we go in depth with dynamic linking so this is going to be our slug and in that slug first of all we are just going to set up some scaffolding i'm just going to paste this in here so we are coiling the prismaclient uh we are calling head styles styles are getting coming from home module.css we are also adding a container movie title is going to go right here for the title of the page and the movie title that is going to display on the page is going to go right here okay and also i defined get service site props because we are also going to use them and i define context so from context we are going to get this actual slug of the page so how do we create this page well it's going to be very easy so we are going to do con slug slug that we are getting from context query so when you get to this page you have access to context context has a query object in it and that query object will have a slack property and then we can use that slug to find the movie that we want to display so i'm going to say const movie await prisma movie so we are accessing our movie model again and now we are going to use the find first function find first and in that function uh we are going to say where slug is equal to the slug that we are getting from the context so it's going to find our movie in our database by slug and then we just want to return this return props and we just return movie of course to display anything for that movie we need to send it right here movie and now for the title of our page we can just do a movie title so this is going to be the title that is going to display on the tab in your browser and this is going to display on our actual page you can of course do something like p movie description okay save this and now this should actually work i think i hope so let's refresh this and click on fight club and as you can see we get to the page this is the title of the movie this is the description of the movie and and this right here is the title that you get in the tab from your head tags and that's about it so this is the basic example of how prisma works and how you can use nexus and prisma right now to create a full stack uh next gs application okay so this has been it for this let's check out video remember everything we did here will be available for you on github the link will be in the description below and as always thank you guys for watching and i will see you in the next one [Music] foreign

Channel: Watch and Learn

Views: 3,896

Rating: 4.8360658 out of 5

Keywords: tutorial, JavaScript, React, Prisma, Next.js

Id: 9qJKmesjTd8

Length: 30min 38sec (1838 seconds)

Published: Sun Mar 21 2021