the most important Next.js features to learn (in 8 minutes)

I'm gon to try to teach you as much as I can in five minutes about nextjs first step is don't read the docs let's just go over here to a terminal and say npx create next app latest and we'll call it my app just go ahead and spam the enter key and make an application go ahead and wait a couple minutes for npm to finish installing all of its packages let's open up this app directory let's go ahead and enter that app directory and say mpm runev go ahead and click on Local Host 3000 in the terminal and you'll see that the nextjs app is running so the first important thing to understand about nextjs is that it uses a file based rou so inside a source app you have these page. TSX files and these are used to declare what is going to be on your page in our case let's just get rid of all this extra boiler plate because we don't need it and I'll just say hello world and just verify this shows up so let's make a new route I'm going to call it users and we're going to go ahead and just make a new page. TSX here let's copy this page and I want to show you that you can make a new page as simple as this say users page so now we can go to the top route and just say/ users and notice that that new page shows up so now let's learn about data fetching so typically you have a a data access directory and I'm going to go ahead and just say put a users file in here I have some code that basically just stores and retrieves from a global storage so that when next is restarting I don't lose this data but we have two methods get user and update user let's try to use them in our react server component so when a page loads often you want to fetch data so how do you do that well put a sync in front of this I can say cost user is equal to get user like this but we need to pass it an ID the way you can get the ID is you can actually add another folder here called user ID and this allows you to get path parameters so if I go up here and say pams I can simply say ps. user ID this is complaining because we haven't typed this so let's just go a and add some typescript types here so that we know that a user ID should be passed over in the path parameters and remember to a wait on any promises and we can actually just display this name right here if we go back to the app and now type in like 50 we should see users John Doe now the key thing to point out is that this technically is coming from an external data source if you using like a database so that's how you can actually fetch data when your react server component is running through but let's kind of take it to the next step how do you store data let's make a form here and I'll give it an action and inside this action you can actually just give it a use server Anonymous function and then we can go ahead and put an input here so we can keep track of the name and then also a button for submitting it so I'll say button and then we'll say submit Now by default when this form submits if you're using an action like this you'll get some form data so I'll say form data and then we're going to say con new name is equal to this and then we're going to update that name so say update user again which is a method that came from that data access file and we want to basically update the name where the user ID is equal to that and then we'll put a sync in front of this like that let's just style this button real quick as well and then also style this input okay let's just type in testing and click submit notice that the app doesn't by default update this so you actually have to manually refresh it now the way you can tell nextjs to clear its caching mechanisms and refresh the page is simply after you modify some type of data in your database just call revalidate Path and then pass it the path that you want to refresh basically for your user so now if for to type in hello world click submit notice that that automatically updates pretty cool but let's take this a step further let's say you wanted to basically show a spinner on the button when you try to submit this how would you do that well typically what I do in my applications is you can make a new file here called actions you can put use server at the Top This is a string that you'll need to tell next that this is going to be basically a bunch of API endpoints you can invoke and we're going to make a function here I'll say export async function update name action like this it'll take in some form data and uh we can go ahead and delete some stuff let's just go ahead and Auto Import those things as well and we're going to keep the revalidate path but now we don't know what the user ID is because before we could just pass it in so there's two ways to achieve this one quick way is say update name action bind and then pass it the ID of the user and if you go up here you should get a user ID of a stream and then you can actually use that user ID in both locations let's try that out I'm going to say hello world exclamation mark click submit and that still works but there's actually a hook built in the nextjs that really helps you out here so I'm going to go ahead and say const State and action is equal to use form State go ahead and Auto Import that and we want to pass in the update name action we have and then I'm also going to pass in a user ID like this so now we can actually just call this action inside this form submission and then go over here and this will be previous state and this will take an user ID of a string and we can just simply return the same user ID and of course we'll get that out of the previous state so that's a way you can kind of initialize the action with some data you can also put a hidden input and just submit the user ID that way but this is just one approach that works pretty well so unfortunately you can't use use form State inside of a server action so what you typically have to do is make a new file called like form. TSX then we're going to bring in our entire form but we need to put use client at the Top If you want to use a custom react HK make sure you have use Clan at the top and we'll call this just a form and let's just get rid of some of the stuff that we don't need now we do need the user ID so let's just go ahead and bring in a user ID like this now we will need a user ID in the prop so let's just go ahead and say user ID as a string and we can start using it places we don't need to fetch the user anymore and we also can't use an asynchronous keyword inside of a used client component now the last steps is we really just want to export the form we don't want all this extra stuff so now we have a form that's in a nice nice file by itself and we can actually use that down here so let's just go and import our custom form like this make sure we pass it in a user ID so user. ID like this and then finally let's clean up that use form State hook because you cannot use hooks in react server components so let's go ahe and save that go back to our app testing submit that and that all works now the reason we're doing this is because we want to show a little spinner inside the submit button luckily there's another hook called use form status which if we were to extract this button into its own special button so I'll just say const function um submit button we can go ahead and return that button like this we'll call submit button here so now that we pull that button out we can simply say cons status is equal to use form status and that's going to have a pending flag on it so I can say status. pending and if it is pending we'll show Saving otherwise we'll just show save so let's just try this out go ahead and just type in some information click save and notice that it shows that quick loading State over here now they kind of add a fake delay let's just go ahead and say sleep one second and then add a promise that just takes some time and I'll say testing again click submit and notice that it does say saving now there's one last issue I want to point out is that basically when the form submits sometimes you need to clear out the input the one way you can achieve this is just add a ref to this form go ahead and bring in use ref and I'm going to pass that to the form itself and if the state returns a say message success which we'll default it to nothing for right now but over here we actually say message success we can just go ahead and clear out the form so I'm going to say form ref. current. Let's test it out I'll say hello world click enter and notice that it clears out the form once a success message comes back now I will say there are probably tons of other nextjs features you should read about in the docs but overall this is the pattern that you're going to be following a lot when you're building out an application which includes the file based routing the path parameters creating a page creating used client for forms and having a loader on those forms using for use form State how to clear out the forms after they're done submitting how to create an action and have that return some data and revalidate the current path the user is on and also how to mutate data in your potential database so let me know if you like this really short compact video of me trying to teach something um and I might do it again otherwise have a good day happy coding

Channel: Web Dev Cody

Views: 28,050

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: LkDelp5WWYU

Length: 8min 26sec (506 seconds)

Published: Tue Jun 25 2024