Amy Dutton: How Next.js and Prisma make frontend developers full-stack

foreign [Music] you did you know that only half a percent of the world's population can code it's a very small percentage making a huge difference in the world and I think we can all agree that a lot of the good things and most of the major advancements in the last 10 20 30 years have all been through code through software we've put people on the moon we can connect with people instantly around the world I mean look at this conference and even in a time of covid it's allowed us to continue to work and make progress and the cool thing is that's us we're the coders we're the ones making a huge difference in the world we get to instigate change and we get to make a positive impact on the rest of the world and I also want to applaud versus and their mission which is to enable us as developers and designers to build and publish wonderful things there's no greater feeling than being empowered by code to look at something and know I can build that I can solve that problem I can make my life and the people's lives around me easier through the things that I build in my own story I started coding when I was 16. yep that's me at 16 my hair doesn't even fit in the frame I started where most people start I started with HTML and CSS and let's just take a minute and appreciate the struggle of learning CSS but once you have that down sprinkle on a little JavaScript and congratulations you are a front-end developer so where do you go from here well let's tackle the back end yeah it's hard and more like the back end tackles us for anybody that's tried learning back in development you know back when I was 16 it required learning an entirely new language then Along Came some Fantastic Tools like nexjs and with the single edition of this little API folder the world changes suddenly you can write back in code in JavaScript in a language and framework that you already know and are familiar with you can write code that runs on the server but that still leaves the problem of the database I mean if you want your application to save data persist data or really do any heavy lifting you need a database and who wants to write SQL statements definitely not me for one that's one more language that I have to learn and as we've already talked about it's hard to learn new things maybe you've seen this graph before but as you start learning new things you have a sudden boost of confidence but you have very little wisdom so that's the peak of Mount stupid and then once you realize you don't know what you don't know and you don't know a lot you go into this Valley of Despair and then as you start to learn more and gain wisdom that confidence slowly increases that's the slope of Enlightenment and then as you really start to understand and grasp a concept then you're able to reach the plateau of sustainability so let's talk about how this applies to full stack development well if you take something like next JS and add Prisma now we're talking suddenly the back end is far more approachable and it takes something like this confidence curve and flattens it out making it much more approachable and easier to gain that wisdom and confidence that you need I want to walk you through just how simple this can be so why not start where most people start a to-do app I know to do apps get a lot of grief but it's a great way to learn because you're working through all the crud operations create read update and delete and honestly that's 90 of most applications and in this case I added on an additional level of complexity by grouping tasks together with projects so that you can look at relationships so let me walk you through the design and exactly what we're going to build so this app is called task glitter because everyone's tasks could use a little bit of sparkle and shine in this app we'll be able to edit existing projects we'll be able to add new projects through the input field and then you can see my awesome project gets added to the bottom of my list we'll also be able to click on a specific project and view all the tasks related to that project and then we'll also be able to check and complete tasks okay so let's get started we'll start with a next JS project setup so here I'm creating a next app with typescript enabled then I'm going to call my project task glitter and let's add Prisma to the mix I'm going to say npx Prisma let's proceed because otherwise that would be a very short demo and then once everything is installed it's going to give us a list of all the commands that we can run as well as some examples let's start with this first one we want to set up a new Prisma project I'm going to run MPX Prisma init in the terminal and once that's finished it will give us a few new steps this is a brand new project so we'll just need to set the database URL but I do want to point out you can take an existing database and run MPX Prisma DB pull and it will turn your database schema into a Prisma schema converting your entire project pretty cool right okay so when I ran in PX Prisma init it did two things it created a schema dot Prisma file and in dot EnV file first we'll need to provide our DOT EnV file with our database URL connection string I'm just going to spin up a Super Bass database real quick for this project Super Bass does have its own API but you can also use it as a regular old postgres database which is what we're going to do here and if you check super basis settings on the database page there's a connection string section where it tells us exactly what we need then we can just copy and paste that line into our DOT EnV file now let's take a look at that second file that Prisma created this is our schema.prisma file and out of the box this is what it looks like let's scroll down to the bottom and create a couple of models for our projects and tasks this is so much easier than building things out in a database we can just list out all the information that we want to include for each model so for projects we need an ID which is an integer a name which is a string and then we'll have related tasks with tasks we need an ID which is an integer and you can also see there that I've listed it as an ID and by default I want it to Auto increment we also have a name which is a string the completed date time and we can use that to determine whether the task is completed or not the order and the related project and welcome to the dark side we're now officially moving into the back end so anytime you make updates to your prisma.schema file you have to run MPX Prisma migrate Dev so I'm going to run that in the terminal and then it'll ask me to enter a name for my migration and I'm going to call this setup projects tasks but you can call it whatever you want then Magic if you check your database within superbase you'll see tables appear in our database for projects and tasks so what that did was that command created a migration file so you can see that there in my sidebar and here is the actual file on the right and if you look at the contents it contains all the SQL that we didn't want to write it does that for you the other nice thing about migrations is that if you're working with someone else and they pull down the project locally it will build out the database for them okay next let's run MPX Prisma Studio within the terminal and I know we have a GUI or a visual interface with super bass but what this line will do is it'll allow you to actually see your models within your browser window so if you're running a postgres database locally this might be a better option for you that allows an easy interface to be able to add information so for example if I click on the projects you can see right now I have no projects but I can easily add a record now that we have all the back end pieces is set up let's actually set up the front end and Prisma actually has a front-end client to make these database connections very simple so you can run npm install at Prisma client to get their Library up and running and the Prisma client is actually tailored to your own schema so you'll need to generate it every time you update your schema so you can run MPX Prisma generate now let's create a single Prisma instance that can be imported every time we need to use Prisma this particular code comes straight out of the documentation now let's take one more look at exactly what we're going to build so here you can see I have a list of projects we actually need to pull all of those projects from the database so let's take a look at the code to make this happen so if I look at my index.tsx file so this is where I'm importing all of my projects you can see that I'm using git server side props and inside I am using this Prisma call prisma.projects.findmini to find all of my projects I'm returning that prop on line 37 and passing that onto the page so you can see that comes in as a prop then I can pass that into my project page component and I did want to point out while I'm here that Prisma will also generate all of the type information so you don't have to try and keep those things in sync Prisma will generate those types for you which makes it really nice now if we take a look at the front end in our console.log this is the information that Prisma provides you can see that it is a nice array just how we like working with JavaScript makes it very easy to map over you can see here my project page component I am using a map to Loop over each project and display it now let's take a look at API routes and this is really where you have unlimited power within xjs and Prisma so first I want to cover a few things with each crud operator so create read update and delete you also have an HTTP verb that corresponds with it we'll make good use of this throughout our API okay so let's talk about adding a project so here on the front end I have my project page component so I'm using react hook forms and I'm taking all of the data that comes from my form and then I'm running an on submit once that form gets submitted I'm passing in all of the data that came from the form and then I'm going to build out my object so here I'm grabbing the project name then I'm going to use the fetch API to Target our API folder and inside I have a projects directory with index.ts so I'm actually going to use that route and there's that post method that we were talking about I'm going to use that to create a new project I'm going to set my headers to be application Json then on the body I'm going to pass in that object that we created on line 17. so as soon as this project actually gets created I'm running a function called refresh data and this is a function that I created on the router so if we head over to our router page here you can see here's my refresh function and I'm using next use router to refresh the data on that page and then I'm resetting my form and that reset is coming from react hook forms obviously this is all within a try block so if it hits any errors then I'm going to catch those and display them in the console now on the back end what does that actually look like within our API folder so I mentioned we're targeting our API projects index.ts file and inside there's a Handler function and this takes a request as well as a response so on the request and grab the project name that I passed over here's a Prisma call to create a project using that data okay so now that we've created a project how do we update a project and again this is what it looks like on the front end so a user would click on that pencil icon and they would see an input field so this is kind of similar except instead of sending the user to API projects we're going to pass in the ID of that project in the URL so it'll be API project slash say one two three whatever the ID for that project is you can see with square brackets I can make the URL dynamic So within this file you'll notice I'm checking on the request to see if there's a put method and if there is then I know that we're looking to update that particular project so I can grab the project ID from the URL that I passed in then I can also grab the name that I passed in from the front end then I'm using the Prisma update function to actually update my project and with the where Clause it's going to find my specific project and with the data it's going to pass all that information over to the back end on the front end this is where we're handling the form submission so I have another try block where I'm going to try and run this code and if it doesn't work I'm going to catch the error and put it in the console on this particular line const body I'm going to go ahead and build up my object that I want to send over to the back end then I'm going to use the fetch API and build out my URL string based on the project ID you'll notice there's that put method to say that we are updating a project and we're using that on the back end and then I'm also going to pass over all of the content on that body tag once that's all done I want to refresh the data so that's using that same function that way our list will get updated and then I'm also going to change the project state so I have just react use State controlling whether the form is showing or whether the name of the project is just being displayed and of course if there's an error then it'll display it in the console now that we've talked about create read and update let's talk about delete and this one might be the most straightforward so with deleting it's using that same route API slash projects slash ID so that ID piece is going to be dynamic but because we're using a delete method then we can check for it and if that exists we want to grab the project ID from the URL we're going to pass that over to Prisma you can see here on line 20 that it's looking specifically for that project the matching project ID that actually covers all the credit operations for projects pretty amazing right well let's talk about tasks and this is going to be a lot of the same but I did want to point out one key difference so if we look at our individual tasks page I'm passing in the project ID through the URL I'm using git server side props just like I did before and I'm using params to grab the project ID out of the URL and then Prisma has a find unique function where I can limit the results based on the ID so that's the ID that I got from my URL and then this is where the relationship part comes in all I have to do is include this include block that says tasks is true that I do want to include that relationship with the results and remember we set all of that up within our schema.prisma you can see the relationship between our projects model and our tasks model we're saying that there are tasks on a project and there's a project Associated to our tasks and we're saying that the project ID also has a project ID field on our tasks model and it's referencing our ID on our projects so there's a little bit of cross-reference there to establish that relationship as a quick recap we talked about how Prisma and xjs make back-end development so much more approachable we're able to create a custom API using Prisma so that we can send data back and forth between our database if you're interested all of this code is posted on GitHub it's open source feel free to grab it Fork it modify it whatever you like if you'd like to download my slides and walk through everything step by step you're more than welcome to this QR code should get you to the right place and I'll email the slides to you and of course if you'd like to connect with me I'd love to hear from you if you have any questions or concerns about the talk my handle on most places is self-teach me thank you

Channel: Vercel

Views: 35,827

Keywords:

Id: quNLtK7hWYs

Length: 16min 29sec (989 seconds)

Published: Mon Oct 31 2022