Next.js App Router, Prisma, Postgres: Your First Full Stack Application

today's video is going to be a full stack next.js application that we are going to build this is going to be more of a kind of beginner application in which we just build a Bare Bones application which we use nextgs we set up a postgres database and then we use Prisma to make queries to that database in which we can create posts we can delete posts we can read our posts and do some different things within a full stack application now the prerequisites of this you should have a good idea of how nexjs works just and generally speaking you should know react you should know basic JavaScript you should probably watch my introduction to Prisma to get an idea of how that works before this but as long as you kind of have those fundamentals down you're going to be able to follow this this is just in JavaScript and then we use Prisma next.js and postgres so it is an introductory full stack application but there are those things that you should know before getting started here but without further ado let's hop in to this full stack next.js application so here in vs code the first thing that we're going to do is run MPX create next app at latest and this will spin up a new next JS app so for Swift and name it so I'm going to call this full stack intro we're not going to use typescript we are not going to use this let not gonna use tailwind and overall we are not going to focus much on Styles here in this kind of intro here I just kind of want you to get used to you know making a database connecting to it and doing that stuff so we're going to focus on that aspect of things we're not going to use the SRC directory we are going to use the app router and I do not want to customize the default import to Alias so this has created a new project here within my documents full stack intro folder so I'm going to go file open and I'm going to open this folder within vs code so this is now just created a new project here in nextgs for this and what I am going to do now is I am going to add this project to GitHub which is going to allow us to set up our versel postgres database because versal integrates very nicely with GitHub and once we push this project together we'll be able to kind of set things up and connect it to versal very easily so let's go ahead and I'm going to just do git add and now I'm going to say git commit initial I used to build initial yeah initial project emit I guess and we just made our commit there but now to push this the first thing that we need to do is create a new GitHub project so here over on GitHub I'm going to assume that you have a GitHub account if you don't have a GitHub account I would recommend creating one it's free and you'll probably be using GitHub or your kind of actual professional job and stuff so this is my GitHub page with my beautiful picture here and then you can see Ragnar in the background hanging out like a good boy that he definitely isn't but he likes to pretend sometimes from my videos but what we're going to do is click on the plus sign here to create new let me go new repository I'm gonna call this full stack intro and create Repository and then what we're going to do here is copy this command get remote ad origin and then it's going to be the URL to this project I'm going to copy this I'm going to paste it within here within my terminal so I that's basically connecting this project to my GitHub project and I'm going to do git push I'm going to get this error so then I'm going to copy what it recommends me to actually do which skip push set Upstream origin main so I'm gonna go ahead and do that and then this has now pushed my project to GitHub so if I refresh this page I should see my next JS project in here which I do indeed see my project here so from here what we need to do is now connect this to versel so let's go ahead and head over to versell.com and I'm already signed in if you don't have a versal account you'll first need to sign in and also connect your versal account to GitHub but creating a new account is free and connecting it to your GitHub account should be really easy as soon as you create an account I believe it will automatically prompt you to connect it to your GitHub if it doesn't then Google connect versus account to GitHub and it's super easy to do so don't get hung up on this it's super easy I'll just create a versa account for free connect it to you your GitHub and then once you do you can go to your overview page here and once on your overpay overview page you can do add new project and then see how it's connected to my GitHub repos here if you don't see the GitHub repo that you just created then something went wrong with you connecting it to your versel account so just make sure that's set up correctly but I'm going to click import here next to my full stack intro project assuming that you named your similarly that's what you would click on as well so I'm going to import this here and we're going to click deploy and the reason we're doing this is because we're we're going to connect this to a database here in just a second let's wait for this for one second to deploy your should be pretty dang quick I have a hardwired ethernet so this should be pretty quick for me especially but in the meantime do you guys want to talk watches so I've been looking at some different watches that are way too expensive for me to actually afford but one of these days where we're gonna buy a nice watch okay you don't have to listen to me do that anymore congratulations we have deployed this but we're going to continue the dashboard here and then what we need to do here is when you click on storage up here so we have project deployments analytics speed insights logs and storage so click on storage here and then once we click on storage what we're gonna do is we're going to create a new database and for this we're going to click on postgres which it is a SQL database that is in beta here but I think for demonstration purposes here it's it's still going to be a bind to use if you're going to use this in like a fully production application out maybe either read more about this on like when they plan to take it out of beta and stuff like that maybe you would connect to a different database but we're going to use versel postgres here as our example so I'm going to click postgres and click continue and then after clicking continue you'll see this little beta warning here we're totally fine here to do this and demonstration purposes let's create a name for our database so I'm going to just call this full stack intro and then I live in Colorado in the United States so I think Washington might be the closest region but I'll just select whatever region is closest to you wherever you are located and then click create here and we can now see that we have created our database here and it gives us our database URL and all that good stuff but what we're going to do now is we're going to head back to our terminal here for full stack intro and we now need to install our vers cell CLI so command line interface and then the command that we need to run here I'm gonna first do sudo and then it's gonna be npmi-g versus LL latest if you're not on a Mac you might not need to run sudo I'm going to do that here and then I've already typed in my password here today or this so I didn't need to do it again but you might need to type in your password uh it's just your password to enter your Mac so you might need to tap that in this wall but this is going to install the versal CLI and then what we need to do here now is we need to run versel EV hole.m dot local so let's go ahead and run this command and you can see that you're going to get an error that says your code base isn't linked to a project on versl so we need to run versel a link here and then once we do that it says setup documents forward slash full stack intro I'm going to type y and then we're going to do code Ryan Salomon I'm going to link to an existing project and then it's just going to be full stack intro and then now we have linked this to first verse L here so now if we run versus L M poll dot m dot local we're going to see that we have now pulled in some environment variables I'm not going to show you them here but you should now have a m dot local file here and we're actually going to want to change this to just a dot m file for reasons I will discuss later and then in your git ignore just make sure that you have dot MV in here and I actually think that Diane's star is going to be fine here because it will ignore it but just a plate safe I'm going to put dot m in here as well so that's just gonna include some environmental variables or our postgres database but now that we so we've successfully kind of linked our versel database here to our project because in our.m file we have pulled in like our postgres URL that it gives us that you can see right here in some different environmental variables and you can see that it recommends you to pull your environment variables and stuff like that but we're also going to use a tool called Prisma which if you haven't seen my intro on Prisma that might be helpful prior to watching this video but essentially it's a orm for databases so it's a object relational mapper so it just provides us an easier way to work with our database is effectively what it is so let's go ahead and get that installed so we're going to run npm install Prisma dash dash save Dev so npm install Prisma save Dash dab and we're going to run this here and then that should have installed Prisma and now to create our Prisma schema so we need to create basically different tables within our database and this is what our schema is going to represent we're going to create within our app folder we're going to go new file and then we're gonna go schema dot Prisma is what we're going to create and this is a new Prisma schema folder and then within this folder we're going to add a couple different database models and we are in particular going to add a post and a user model and the models that we're going to add are actually going to come from this versel.com forward slash guides forward slash next.js here's about postgres this article here and what we're going to do here is copy this Prisma schema from this article and then we're in a comeback and paste this schema into our page so basically what we've done here is we've told Prisma that we are going to be using postgres as our database provider and then here it's using our DOT EMV file postgres Prisma URL which we pulled in for our EMV file here with our versel command line tool is what we pulled those EMV variables in so we already have this in our EMV file as well as this right here and then we're also creating two different tables in our database a post table that has an ID a title content published author author ID and then we also have a user table which has ID name email created at so on and so forth so these were present in different tables within our database that will be created within postgres here so to actually create these tables what we then need to do is we need to create a new migration for our our database which in migration is effectively just going to be a different version of our database so to do this we're going to run the command MPX Prisma DB plush and then when running this command you should see your database is now in sync with your Prisma schema and it should say generated the Prisma client as well so I'm going to clear this and when we go back to our versal project you should see that for your database here make sure that under objects you see full stack intro here and then you see the different environment variables if you don't see that you can click connect project and make sure and select your project here make sure it's connected and then if you do that then you might need to rerun the versel and pull dot EMV just to make sure that you have those environmental variables because I have had times to where I I run MPX Prisma DB push and then I get an error and it's because I don't have my environment variables so just make sure that your project is linked there and then you do versel and Pull and then that should make things be set up correctly for either on MPX Prisma DB push here alright but with that we have now created our new tables within Prisma here so now let's go ahead and since we have set up our new database we can now run MPX Prisma studio and that is basically going to open up a web browser that shows us our kind of actual database that we've created so I'm gonna take this over here and this is me running this at localhost 5555 so you see that I now have two models a post model and a user model and now that we have these models we can then actually go and create a new post as well as a new user so let's go ahead and do that now so the first thing that we're going to do here is we're going to create a user so I'm going to click on user here within all models and when this pops up I'm going to click on ADD record and let me actually adjust this just a bit so you can see where I'm at so I'm still just in my Prisma Studio here and then I'm going to click on ADD record and then for this it's automatically going to generate a user ID here but we want to put in a name so I'm just going to use myself as this user here so Ryan and then my email is code no wait it's Ryan at code Orion dot IO and also side note I'm thinking about maybe doing some sort of tutoring or coaching or something like that on a weekly basis like just one-on-one with people so if you're interested in that feel free to reach out at this email this is legitimately my email but still something I'm kind of considering and then it's automatically going to create a created at here and as well as an updated app so I'm gonna go save one change here and now I'm gonna go back so I'm gonna X out of this I'm gonna go to my posts and I'm going to create a post so I'm going to add a record here and this we're uh we're doing this through this kind of graphical interface that Prisma Studio gives us but we are legitimately adding users and posts to our postgres database right now later we will do this programmatically using JavaScript but we are legitimately writing to our database right now so here let's create a post so I'm gonna just name this I'm gonna just say post one and for Content I'm gonna say post One content this is my content and for a user I'm gonna click on user there and I'm gonna check Ryan and then I am going to save this change and let me make sure that that saved for user so yeah that that should be saved for the user so we have now created a new post and a new user so this my user that I created Ryan it now has one post here which is my post that we just created okay so you should have a user linked to a post whoops I didn't mean to to do that I'm not going to save this change I'm going to discard changes so I'm going to exit this and then now what we want to do is start interacting with this programmatically using different route handlers and stuff like that within next.js so let's head back to vs code and what we're going to do here first is we're going to install the Prisma client so like I said earlier Prisma is this orm object relational mapper that allows us to work with our database a little bit easier and the Prisma client that we're going to install allows us to kind of use this orm so we're going to do npm install at Prisma forward slash client so I'm going to install this here and then after we installed this client what we need to do is because the Persona client is tailored to our own schema we need to update the Prisma client every time we change our our schema so what we need to do now is run the command MPX Prisma generate and when doing this we can see that they generated the Prisma client and it says we can import Prisma from Prisma client and all the new here's my client here below so another we have this created what we're going to do is we're going to create a lib holder and we are going to create a prisma.js file within that folder so I think that I'm going to do this I'm going to do outside of my app so I'm going to just click on a new folder here within my full stack intro folder and I'm going to just call this lib and then I'm going to create a new file within that and it's just going to be prismo.js and if you guys want videos in typescript in the future let me know I tend to do JavaScript just because it's more like if you know typescript you could do this project in typescript it's no problem I just want to make sure this is accessible to people that might only know JavaScript but we can do some typescript stuff in the future as well but with this within this prisma.js folder we are going to basically create a wrapper around the Prisma client that basically kind of helps us out a little bit so we're going to import the charisma Appliance from at Prisma client and then following this we're going to set a variable called Prisma here we're just gonna initialize this variable and then I'm going to say if process.m dot node m is equal to production then we're going to say that the Prisma variable is equal to a new here's my client else if we're not in production the war we're going to do is if not global Dot Prisma if there's not a global Prisma then set a global.prisma is equal to a new Prisma client and then outside of the if block we're going to say prism Prisma is equal to Global Dot Prisma and then we're going to export and default Prisma here so this is basically just doing some checks like if we're in production then set our Prisma to be a new Prisma client but if that's not true and we don't have a global Prisma then set a global Prisma with a new Prisma client else to set Prisma to our existing Global Prisma and then we're going to export this personal so then we're going to use this prizmo client everywhere else in our app and if I just said Prisma about 800 times I apologize but hopefully this kind of makes sense what we're doing here so now that we've kind of updated this all we're going to do now is we're actually going to query our database and use our Prisma client within our actual app so we are going to head over to our app folder here I'm going to click on page.js and right now this is just like a initial next.js project so I'm going to delete all of this here so I'm going to remove all this and I'm going to do each one and let me change this jsx instead of just Js because then it's going to give me better code completion so I'm going to do H1 here and I'm going to just say feed and now what we need to do is we need to make a query to our database to get all of our posts and then display our posts on our home page so if we go back here and I go to localhost 3000 you're just gonna see this H1 with feet as you can see here we just have feed at logos 3000 so with this we want to actually make a request to our database to get all of our posts and then render them out within this page so now here within our home page all we need to do is make a request to our database and since since this is server rendered here this is a server component we can just make that request to our database directly to get all of our posts so the way that we can do this is I can create an async function git posts and what this is going to do is I'm going to say const I'm going to say posts is equal to I'm going to await and I need to import our Prisma client here so first I'm going to go import Prisma from at live forward slash Prisma and I'm going to say kant's post is equal to a weight where is Prisma dot post dot find mini so this is going to get all of our posts and I'm going to set a where Clause so this is like a SQL where Clause I'm going to say where and it's basically just saying uh you want to do a condition for your query to your database I'm going to say where published is set to true and then I'm also going to need to include and if this is a little bit the syntax might be a little bit confusing you might not seen this before documents as well you'll definitely get used to it the more you use it so I wouldn't worry too much about it but I'm going to do include I'm going to say author and then I'm going to select and I'm gonna say name is true because I want to get the name of the author for all my posts and then here I can just do return posts and I could have done like just return await this but I think this is even more clear so I'm going to make my function home here I'm going to export default async function and I'm gonna say kant's posts is equal to a weight and I'm gonna call git hosts and all I'm going to do here is counsel.log my posts and I counsel login object because it will set the property of this object to posts and then the value will be all my posts here it just gives me a label for my Council log which I really like to do so if I come back and I refresh this page we shouldn't see any differences and what I open my terminal well you're going to actually see here is I have Council logged my posts but it's an empty array here so why why might this not be returning my posts well this where Clause it's only going to return published posts so if we go back to our Prisma Studio what we're gonna see is that if we look at our post that we have in here we're going to see that published is false so we actually need to make sure that this is a published post here so I'm going to click on this and then I believe I can change this to true and then I'm Gonna Save change and now this should be a published post so if I come back I'm just going to refresh the page and then if I open this I now see I have my one host here and it has post one post One content this is my content published is true and then it has my author it renders as an object here because if you stringify an object it's just gonna kind of turn up as this so we have successfully gotten our post from our database that we created using our Prisma Studio here so now all we need to do is create a post component and then we can map over our posts and render them just how you usually would in react.js so what we're going to do here is my post it's going to have a title content an ID as well as I think I'm gonna pass in the author name as well so I'm going to create within my app a folder called components and then within my components folder I'm going to go new file and I'm gonna just do host.jsx and I'm going to export a default function host and this post component is going to accept an ID a title content and an author name prop and all we're going to do here is we'll turn something super super easy let's just return like a a div that has maybe like an H4 where we have our title and then we could do a P tag that has our content and then we could do maybe a maybe another maybe we'll do above the H4 we'll do an H3 with the author name and you could set this up however B1 this is not particularly important and then I guess I don't need the ID right now but we're still going to pass the ID because we're also going to implement deleting posts here in the future so we are going to use this but for now we're just going to not use that prop which should be just fine and then so we can see this I'm gonna just put a style prop on here border let's just do one pixel solid white and then let's also just add some padding here of maybe something like I don't know 15 pixels so now that we have this within our page.jsx I can now take my hosts and I can map over them just how you would in react and we can return a post component here imported from our components forward slash post and then what we need to do on this component we need to set a key to be post dot ID and then we're going to set ID is equal to post ID and then we're going to set title is equal to oh start height tool and then content is equal to post dot content and then author name let's equal post dot I think author dot name I think that's correct but we'll know real quick if we get like an error for this and I'm going to remove my my post console.log so if I save this and we head back we do indeed see our one post down here now let me uh adjust this a little bit let's adjust the page.module.css this says space between let's just do Center so we can see it on our page a little bit better and that looks a little gross So within our post let's also add a little bit of margin so maybe just like something like margin is let's do 10 pixels top and bottom zero pixels left and right and then if we come back we do indeed see our feed as well as our post so this is our post from our database that we just created and we're making our request to our database within our page.jsx file here with our git post function using prisma.post.find mini so if you've made it this far you have successfully set up a postgres database and you've also within the back end of your next JS application here within this server component you've queried your database you've gotten some data from it and you've shown that data in your UI like this is technically speaking we have already built a full stack application here we set up a database and we're using that within our UI so congratulations if this is one of the first and a full stack apps that you've uh created then you're well on your way to be at a full stack engineer here so pretty cool I not at all I've been doing the program I think for a handful of years now and I still think it's cool to like connect to databases and stuff like this which I guess that's a sign that I I'm doing the right right profession if I find this cool so with that let's go ahead and let's just add another host here within Prisma just so we have a couple of different posts so let's add another record for title we're going to be super creative here I'm going to do Post two and then I'm going to say post to content this is post twos content and then we are going to publish this and then I'm going to set the user to be Ryan right here and then I'm going to save that change and then I've basically just written another post in my database and if we come back here actually we want to come back to our localhost if I refresh this page you're now going to see post 2 shows up and yes this dialig here is pretty gross but we're not really focusing on that we're focusing on full stack app in xjs with a postgres database and using the Prisma Orem so now that we have the ability to have our different posts here and we can get those from our database let's also cover creating a post from our database or creating a post within our database so the way that we do this here is going to be a little bit different we're actually going to set up a route Handler in next.js because to create a post it's probably going to have to be a client component because that component is going to have to have like some sort of input on our page so the user can type in the title of the post the content of the post and Weebly also allow them to type in the author of the post although I'm not planning to implement authentication in this app yet I think we will in the future but not in this kind of first video here so we might use an author we buy Dot I'll I'll surprise you here in a sec but what we do want to do is set up way for creating posts within our our actual database here so what we're going to do for that is we're going to have to create a let's create another page here where they can add a post So within xjs within our app router let's go new folder and I'm going to do add post and in this folder I'm going to add a new file and it's going to be a page.jsx file I'm going to export a default function called add host and this is going to be a client component here so we'll touch on that in a second but I'm just doing H1 and it's going to say add post and then we're also going to have a form here to add a host and when we click on the submit button of our form we're going to make a request a client request to our back end in xjs so we're going to use our route Handler and then we're going to create a post within our database so for this ad post like I said it is going to be a client component here so at the top of the file we need to put use client and we should probably also like on my page.jsx page I'm going to put Maybe maybe below my posts hmm maybe above my post I'll I'll put a let's just do next JS link so I'm going to do link from next link I'm going to say add post and I'm going to set an href and that is going to equal forward slash add hyphen post so that's going to match our add post here within our app router because next.js does file based routing so anytime you create a new folder with a page.jsx you've effectively created a new public route with a routes titled whatever your folder is titled so we created a new route called add post so we're going to link to that here within our page so while this this is probably the most beautiful ux I've seen so let's click on ADD post here and we see my etool with ADD post but let's go ahead and also use my page.module.css file Within this page so let's uh let's import styles from and I think I can do at app forward slash page.module.css and then we're going to say class name is equal to Styles dot Main and that should at least Center things in the page so you can see those a little bit better which it does indeed do here so this is looking fantastic but now we need to do a form and because I'm lazy let's go to chatgpt and have chat gbt create us a form component create me uh form component within react.js this component should have an input where uh user types in a title an input where uh user types and content and a submit button so here it gives us a form component it says create new post and we could create this like a new component within our our actual page here but I think that we're fine to actually just I'm going to copy this form right here and then I'm going to paste this under add post I know that formatting looks a little gross here but I just wanted this to be a Bare Bones project so we didn't install prettier which would definitely help here so I added this form but now we also need to add this logic here so let's go ahead and grab all of this and if you want to grab this from my GitHub you totally can I think that would be a perfectly reasonable thing to do here considering I'm just taking it from chat GPT and you could also take it from chat GPT to give your soul some more practice using it I think that a modern programmer should be using as many AEI tools as possible so with this let's see what we've done here so we have a form in which our on submit calls our handle submit function we have a title in which when our title changes we're going to call handle title change which is just going to set our title to our event.target.value same thing we do for handle content change or this right here then we have a button with type submit so this section looks looks pretty dang good here it wants me to you can perform similar actions so let's just delete all this so right within this handle submit function here this is where we're going to make a request to our backend endpoint which we will create here in just a second but let's first see what the UI looks like for this within our ad host page so let's go back to logo host and I say you state is not defined so we need to make sure we're importing use state from react here and then we see wow this is probably the most beautiful form I've seen I don't know about you guys but I really like this UI so with that we have our beautiful form here so now we just need to handle clicking on this submit button and when we click submit we want to be able to submit something to our database so the way that we can do this is I need to create an Epi route that we can make a request to so the way that we can do this within xjs is within my app folder I'm going to create a new folder called API and then within my Epi folder I'm going to create another new folder in which this is just going to be maybe I'll just call this post maybe add post would make more sense maybe I'll do add host and then within my ADD post folder I'm going to add a route.js file so now what we need to do is create our route Handler so if someone makes a post request to this endpoint and our employee is going to be forward slash API forward slash add post we need to handle post request here so the way that we can do this is I need to export in async function called post and it's going to take our it's going to accept our request as a parameter here and then within this add post function let's say const res is equal to await request dot Json here and we're going to return a next response dot Json with r we will set our data to be our res but I also want to just cancel log our res here within our host request route Handler and I also need to import next response here so up top I'm going to do import next response from next forward slash server so now we've created a route Handler at forward slash API forward slash ad hyphen post and if we make a post request to this route Handler it's not really gonna do a ton for us yet but it is going to just cancel log the request that we make and then it's just going to return a next response but within this route Handler what we're actually going to want to do is we're going to actually want to write our post to our database using the Prisma client so before we do that let's just make sure that we're console logging the right request here so within my ADD post function in this handle submit what we need to do is make a client request to our backend endpoint so what we can do here is we can do try so we'll do this within a try catch block and I'm going to want to make this I think I'm gonna want to make this an async yeah I guess I will I don't know if I really need to but I will do that for for now and I'll do try and we'll do fetch and what are we gonna fetch well we're gonna fetch our forward slash Epi forward slash add hyphen post and then as a option to our fetch request we need to set our method is equal to post and we're gonna also set headers in which that's going to be an object and we're going to set our content type is set to application forward slash Json and I think I spelled that correctly and then after our headers we are also going to set our body is going to be Json Dot stringify and then we're going to pass in our title as well as our content here as the body of our request so we're going to make a fetch request to API forward slash add post right here that we just made this route Handler it's going to be a post method with content type and let me actually move this to a new line remove this to new line content type is application Json and then the body is going to be Json stringify our title as well as our content that we get from our state within this add post component here and then we're also going to want to do catch an error and then let's just cancel dot error this this error if something bad occurs so with that that should make a request to our API endpoint and our endpoint it should count to log this request here so let's go back and I'm going to inspect here I'm going to go to my network tab because I want to see this request occur and for this title I'm going to say post I think this should be our third post now and I'm going to say post three content blah blah whatever and then I'm going to click submit so status of 200 at forward slash add post here and if we preview it it returned Dita with those three content blah blah whatever title is post three so we successfully made a request to our backend and point here in which if I look at the council I should see title is post three content is post three blah blah blah whatever so we successfully made our request to our endpoint but now all we need to do is we just need to write this post to our database so what we can do here is now that we have our our title and our content within our res here and I think I can do const title and content is equal to our response and let me make sure yeah that should that should work all we need to do is say I want result is equal to a weight Charisma so I'm going to import Prisma from lib forward slash Prisma I'm going to do dot post dot create call this function pass in an object in which I'm going to set the data of this post to be an object in which I'm going to just set the the title is going to be title and then the content is going to be all I don't need to do this let's use modern JavaScript I'm going to set title is the title using objects shorthand properties and content is content and then I also want to set a author but we're just going to hard code an author right now in the future when we have authentication we might add an author differently but right now let's just hard code an author so author is a property in which I'm going to create an author let's just set a name and I'm going to just set it to I'm gonna just set it to Riot so all the author names are going to be hard-coded as Ryan we can change this like if you added authentication once they sign in they give you the name so we could just use whatever the session name is and we might very well do that in the future but right now let's just kind of hard code this in here and then we are going to we're just going to return instead of data is our res let's just return our result here so let's go ahead and see if this works now I'm going to clear my network I'm going to say post three post three content and I'm gonna click submit so we get a 200 here let's see if we actually added this to our database so let's go back to our Prisma Studio and Let me refresh this and we do see we have now added host three here except we did not add that it was a published post so we need to change that in our request here but we can see that we've added our third post here and our user it's it's a new Ryan here which is totally fine so it created this user with an auto-generated ID and a name of lowercase Ryan and then I'm going to set this to True here so I'm going to just update it manually but in our actual post request what we can do is we can set published is equal to true and then I think that should automatically publish a post so let's go ahead and create post 4 here so post or say post for content and then let's go ahead and submit this and then if I go back to my database then I refresh it you should see post 4 with post 4 content and publish is true and then also within our UI here we should be able to go back to our feed and see our posts so let me go back and within our ad post page let's add a a link to view our feed so we're going to do something really gross here again import link from next link I'm going to say View feed and this is just going to have an href that is going to be set to forward slash here and then if I go back I should be able to click on view feed and then you see or four different posts the one thing I want to show you here is let's go back to our ad post and I know this looks particularly awesome but let's go back to our ad post here and let's go ahead and add post five I'm going to say post five content and we've clicked submit but now if I go to my view feed you can see I only have four posts but then if I refresh I now have my fifth post which what's going on here is I'm returning when I go back to my feed I'm returning my cached data it's not automatically refreshing this page after I add a post we definitely don't want that like if a user added a post they should see the updated posts in their feed right away so let's now go ahead and fix that so I believe one way that we can fix this is if we go back to vs code and we look at our handle submit function within add post I think that what we can do is we can await this fetch here and then after this fetch takes place so once we await it here in this try block that will assume that everything works successfully and we have added a post I believe what we can do is we can import use router from it only gets next router I think it's actually next navigation here and then we can set a const router is equal to use router and then once we successfully make this post here I believe we can just do router dot refresh now I'm sure there's other ways that we could solve this issue this is just one way that I kind of know off the top of my head here but I would say if you're kind of solving this in a professional application I might just look around for you know spend 10 minutes look around and seeing other solutions to this and maybe see what's best for your use case here but now that I've added this let's go ahead so we have five posts here let's go ahead and add another post so I'm going to add host six and I'm gonna go post six content and let's go ahead and submit this here and if I view my feed now I'm hoping that we see that sixth post and we do indeed see it so it looks like that refreshing the router there it did indeed solve our issue there of not seeing the post so I think with that maybe the final thing to do here is add an ability to delete these posts here so then we can create posts in our database we can delete them we can get our posts and honestly that should give you like a good kind of bare bones project to learn a lot of different things when building a full stack app in next.js so let's go ahead and add this delete functionality so for this I'm gonna go to our page.jsx in just our root application I'm going to close some of these files up here and I see that that's kind of off the screen for you but I'm just making sure that just my page.jsx file is open in my like file Navigator up top but with that what we want to do is we want to add so to our post here I think what we want to do is add a button for deleting our post based on our ID here so right now since we're not making this post a client component this is a server component because in next.js13 your rat components are going to be rendered on the server rather than on the client and since this is the case I wouldn't be able to make like a button that the user can click on and then make a backend request to our database to delete this post as there has to be some like user interaction there on the client so since we need an interactive button component let's go ahead in our components page let's create a client component that's a button that's going to delete our posts and that will prevent us from needing to make this entire host a client component we can just have like a little button client component within the server component and this is something that believe again aramov has talked about on how within your server components you can open up these little kind of holes of client components to kind of fill in rather than making the entire server component a client component which can improve your performance by doing that so within components let's do a new file and let's just go delete post button.jsx and then let's first use client as a string at the top and let export the default function called delete post button and then it is going to take the post ID as a prop and then what we're going to do here is we're just going to return a normal button and let's just say let's just put an X here maybe I guess we'll put delete post that'll work too and then for the on click here I'm gonna pass a function I'm just going to say handle click so right here I'm going to create a function and it's going to be an async function handle click and what we're going to do is we're going to make a request to our database here a fetch request that is going to delete our post and this fetch request should include the ID of the post in the request itself so we can use that ID to delete the specific post within our database so to do this we can do a wheat Fetch and then we're going to do this to API forward slash host forward slash and then we can just add a dynamic parameter here and I need to make these back ticks to make this a template string in JavaScript but we can just do the post ID here and then as a second argument here we need to do a method of delete because we're going to make a delete request here and then also after we delete a post we are going to want to refresh our router again so the post on the page is immediately removed so let's go ahead and do the same kind of you know trick I guess that we did earlier in which we import use router from next navigation and make sure it's next navigation and not next whatever other Library it suggested and then I'm going to say const router is equal to use router and I'm going to call that function and then after we Elite this Fetch and we can also put this in a try catch block and at least do a little bit of error handling here so we can try this and then if it's successful we will do router dot refresh but if there's an error we're going to catch that error and we'll just console Dot error that error so what we've done here is we've created a client component so you can use client in which we have imported our router so we can refresh after we make a delete request to API forward slash post forward slash some Dynamic post ID so now that we have this in place what we need to do is we need to create this API route so the way that we can do this is so since I've made this API forward slash post forward slash some Dynamic route within my API folder here I need to do a new folder that is called host and then I need to do a dynamic route so I can add another new folder and I can use the square bracket syntax and I can do ID so this is going to create a dynamic route and then within my ID folder I need to create a route dot JS so this is going to create a new route at Epi forward slash post forward slash sum Dynamic ID here and then for my post Handler what we need to do is export default function delete and then that is going to take a request and it's also going to have our params since it's a dynamic route it should include a param that has an ID that's the idea of our posts we want to delete so I'm going to say const ID is equal to rams.id and if we would have named our post forward slash ID if this would have been you know post forward slash score bracket Slug and we would have access prams.slug but here we called it ID so in our params our second argument to our delete request we can access ID so the first thing I'm going to do here is I am just going to I think maybe at the start we will just cancel log the ID to make sure that things look like they're working correctly and then from there we can just return a next response and I guess we will do dot Json and then pass in our request I think we're going to change this here in a second so this doesn't really matter I just want to cancel log the ID and make sure that we are making this request to our backend correctly here so now this delete post function or this delete post component should make a delete request once we click this delete post button and it should do this to our Dynamic route in which we cancel log the ID here within our parameters So within our post all we need to do is add our delete host client component here and then I need to set my post ID is equal to my ID and if we go back to our UI here we should see delete post and if I click delete post here you see nothing happens but that is expected we don't really actually do anything but I should see my ID within my console but you see I actually get an error saying export and named export for each HTTP method so I shouldn't have done an export default function I should have just done export function here so let me go ahead and try this again delete post come back and I do see I have my post ID here so that's a little bit of a kind of a gotchi there it should just be export function not export default function so now that I have my ID here we can go ahead and use our Prisma client to actually delete this post so we want to import Charisma from atlib forward slash Prisma and then now that we have this ID here of our post and we get that from our Dynamic params we can say const post is equal to a weight Prisma dot host dot delete where our ID is equal to this ID right here and I need to export in async function so I can use a Wii right here and then we can pass our post into our response.json here so I think this is all the code we need here to delete this post so we're just using Prisma we're accessing our posts and we're deleting the post where the ID is equal to this ID from our params here so let's go ahead and let's open up our Network tab to see this happen if I click delete Post 6 you should see so my o6 is now gone and if I preview this you can see that I returned a post from that request and it says post six as the ID author ID so on and so forth so it looks like it makes that request and returns your response correctly and it looks like that this post is deleted here and if I look at my Prisma Studio I should see one two three four five posts here so that is how you can set up a full stack nyxjs application using prism and postgres allowing you to add posts delete them and perform some different refreshes of your page and all that stuff so hopefully you enjoyed this kind of beginner introduction to building full Stacks apps in next.js future videos will cover next.js authentication as well as more kind of full-fledged full stack applications but hopefully this was a helpful introductory video for you and I'll see you in that next one

Channel: Code Ryan

Views: 12,101

Keywords: coding, programming, frontend engineering, code, software engineer, javascript, web development, next js, react js

Id: GxUR4zIasB8

Length: 65min 38sec (3938 seconds)

Published: Mon Sep 18 2023