NextJS Beginner Project Tutorial - Learn NextJS 13 With This Easy Project

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be showing to you guys how to build your first next GS project I'll keep in mind that I'm using the version 13th of next JS so I will introduce everything from creating the your first project while actually utilizing many of its important features in a very beginner friendly way my plan is to later on make a intermediate project and finally an advanced project which will probably be part of a series now the project we're going to be building as a beginner is really simple but also demonstrates a lot of the cool key features especially with this new version so all I'm building over here is I'm connecting to three different apis which sounds insane but it isn't that complicated you'll see why and all we want on this website is a simple website over here where you type your name my case my name is Pedro so I'm going to put the name Pedro like this and I'm going to click on submit and it will load the data and redirect this to a page where it shows our predicted age our predictor gender and our predicted nationality now all this information for the prediction I'm getting it from three different apis that all do kind of the same thing and I'm going to show you guys exactly how to build this if you want to check out the code it will all be in the description as always my videos are more focused on the functionality so keep that in mind and let's get to it foreign [Music] [Applause] I would like to talk a little bit about today's sponsor Nord pass in today's digital landscape password security is extremely important especially because no matter what we have to have a password it doesn't matter if it's for a part of our life where we're working with our own jobs or if we're talking about something like an entertainment website spending time Gathering your thoughts and trying to remember passwords definitely impacts your productivity and it's a challenge that everyone in the business space faces but nor pass business actually has a solution for you nordpass business is more than just a password manager it is also a productivity booster because it securely stores all of your important passwords allowing for instant access into your online accounts with quick and safe payment processing and an early data breaching detection and built into it so imagine you live in a world where you basically don't have to worry about resetting passwords or waiting to have access to your own personal accounts norpass will handle all of that for you and not only that but also secure all of your passwords into an encrypted Vault so that means that if you have a team you're working with a business you can basically share credentials anything related to payment information or any notes regarding whatever your business is for without having to worry about it being securely stored in a safe space and if you're a large business you can save up to a million dollars in it help desk Staffing costs because you don't have to have an employee that will manually reset your your employees passwords and handle that manually norpest will do everything for you not to mention that it allows you to have full transparency over everything that you're storing and who gets what access and what activities so that means that even if an employee that you're working with actually leaves the team you can revoke their assets really simply in my opinion nor pass business makes collaboration way simpler and more efficient it's a platform meant to keep your company's digital wealth managed and safe and guess what if you want to try it out you can check out out my link in the description and you'll get a three month free trial just go to norpass.com Pedro Tech and use the promo code Pedro Tech to be able to access everything again that's nordpass.com Pedro Tech and remember norpest business doesn't just enhance your online security but it also helps to boost your own productivity now with that in mind thank you again northpass for sponsoring this video and let's get into the tutorial okay everyone so let's get into the actual tutorial so I opened up over here a pretty empty project inside of yes code I just created a folder called next.js proj as you can see over here and I opened it on vs code now what I need to do is I need to run create next app which is a command I can run by just putting npx create next app just like this now this will similar to create react app create an xjs application but it will ask you a couple questions before it can do so so the first thing is what is is my project name well I'm going to run my project entirely from inside the folder I'm currently inside of already so I'm just going to put a dot and it will create everything inside of where I currently am then it's going to ask would you like to use typescript I'm going to go by default with all of the options that next recommends so what I mean default is when it asks a question like this um either yes or no I'm gonna go with the one that by default is already selected and the reason for that is because I also that's how I call next.js we're going to be using typescript we're going to be using um Tailwind CSS that's the tech stack that I would recommend using when creating a next application so I'm going to press enter for this and then enter for eslint as well although we won't probably see anything of that uh yes for tailwind and yes yes and no so as we pressed enter in all of them it will start creating the files as you can see over here but I'll be back in a second when um it's finished installing all of the dependencies and everything required for our project okay as you can see it finished installing um all of the dependencies necessary so I already have my project over here already created if I want to start my project and actually see it running over here in the localhost 3000 all I have to do is run yarn Dev so similar to yarn start if you're using Create react app but with this case the dev is just so we can run the dev version of our project and if I run by the default boilerplate code that comes with the create next app you'll see that this is the the website as of right now it's a bunch of boilerplate stuff related to nextgs which we will immediately delete so I'm going to come over here and we're going to open up our source folder and straight up just delete everything inside of our page component over here but don't worry I'm going to explain what each of these files mean so as I'm deleting this I'm going to explain that next.js is in itself a little bit different from normal react or normal react used with um with create direct app because as I've mentioned in previous videos a lot of people get confused they think that next Jazz is the is an alternative to react but no next just uses react um this is react is what is the one of the main parts of next.js nextges is more of an alternative to create react app or something like Veet it's the way in which you use react to produce your your application so with nextgs a lot of its focus is with the idea of allowing server-side rendering and I'm not going to go into details about what server-side branding is and and how it's done specifically with nexjs we're going to be dealing with it but I'm not going to go into the more abstract and more meaningful part of it because I already have two or three videos talking about this and this is more of a functionality based video with some theory on it as well so what I have over here is um just the source folder of our application right and this is where all of our app will contain you see that there's another folder core app and inside of it there's a bunch of files now the page file over here is basically the home root of our application so if you go into this URL over here and you just don't put anything extra you'll see that it goes into this page now with next Jazz navigation is way simpler than with other methods in my opinion because if I wanted to create another route over here I all I would have to do is just create a folder for example imagine I want to create a route called name and I were to create a folder called name and instead of here I put a component called page.tsx now I automatically have um like an actual URL and routing application called name you'll see that I can call this whatever I want I'll call it page and I could just write I don't know like name inside of here and whenever I navigate into a route called name we will render whatever this component page.tsx over here is rendering so it is a bit different right because if I come over here and I go to slash name you'll see that component is being rendered it's really simple every time you want to create a new route you don't have to deal with stuff like react water Dom or anything like that because it's all built in you just create a folder with the name of the route you want to create and then inside of it you you create a file called page.tsx now why am I saying this well because we have this page.tsx over here which is the root route of our application and inside of here we're going to do some cool things that um you will see like I said I don't show the CSS and in this case I won't be showing the Tailwind success in the video and the reason for that is always because it will take on too much time of the video um to be caring about styling you guys probably won't even care about the styles of the video so I'm gonna add the elements and the functionality and at the end I'll add the Styles so you guys can see how it looks with everything put on together now what I want to create over here is a very simple um kind of form type thing inside of my application I want to create first this div which will be the root of everything then another div which will Encompass um our form and also the section in our website which will say like enter your name just as a title page if you recall in the beginning of the video it will make a lot more sense but we're going to put an H1 tag here saying enter your name then over here at the bottom we're going to start putting our form which will be used to for us to be able to write on the actual um input and then send it um to our API so in our form over here we're going to have just a single input which is going to be of type text right so type text and a placeholder called um type your name something like this now at the bottom over here we're going to add a button so that when you type the name you click on the button it will search for the predictions for the specific name we're going to click predict data and we're not going to put a we're going to put a type over here of type submit because when you click on this button it's going to submit the form now this thing over here is pretty much um okay because if we go over here we'll see that if we go to our root route we have this little text the input and the button but it obviously doesn't do anything right now but we're going to add the functionality just in a bit so what we want to do is we want to add the ability to grab whatever you're typing on this input and use it in some way inside of our application so to do that obviously we have to use a hook called the use State hook now this is starting off one of the most important things or differences with nextgs if I try to use this hook right I'm going to import use State over here and I try to create a state called input value set input Val and then equal to use State and it will be a string this over here doesn't actually work now if I come over here you'll see it will give us an error and the reason why it's giving us an error is because especially with the new version of of react 18 and all the changes that comes with next.js13 we have a distinction between what is known as a server component and a client component the easiest way to differentiate that for a beginner in my opinion is the following inside of a client component you're going to use it purely for interactive content or using like pre-built react hooks so when you have a client component you're using stuff like the react hooks like you state use effect and use context and you're also using stuff like on click on change anything that is related to the browser that's what exists inside of a client component now what is used in a server component is usually you used to fetch data or keep sensitive information because like I said nexjs provides us with the ability of rendering our components in the server and the server components are the ones that are going to do that so the client the browser won't have access to that but it will have access to the data that is achieved or acquired inside of a server component since this is a beginner's tutorial you are completely fine to not understand completely the distinction so don't feel overwhelmed don't worry because with time and as we practice this will become more clear to you using a server component for fetching data is also good because it has faster page load it has a mixture JavaScript bundle smaller because again like I said it's all in the server and not in the client and it's good for that kind of stuff like I said fetching data and keeping sensitive information now by default all components in xjs inside of the app folder over here or server components so that's why it's giving us an error we actually have to transform this into a clan component to be able to use this use State hook over here now to do that we just come over here the top and we do something a little bit weird but you'll get used to it which is um writing the string called use client and saving it having this at the top will turn any server component into a client component as you can see over here it's not giving us the error anymore which means it is working now what we want to do now that we got that out of the way and set up is we want to add an unchange to the input now that's simple we're just going to come over here and pass an unchange and say that whenever there's a change in our event we're going to set the input Vol to be equal to the event.target.value just like this now we're also going to set the value of our input to input vol just like this and for now that should be pretty much it so now that we got the actual input value what we want to do is we want to be able to submit this this information somewhere right we want to send it to our API now the way we're going to do this is I'm going to create over here a function called handle submit which will be called Whenever there is whenever you click on that button for now we'll just keep it empty but I'm going to put it right over uh on the end of the form we're going to actually give it an on submit and pass in the handle submit function now this over here will take in an event which by the way if you are not familiar with typescript you can ignore some of the stuff I'm going to do but if you've ever worked with typescript you have to give the types right and over here we have an event variable that needs a type and the type for this will be form event just like this so you don't have to worry too much about this it's just describing what the type of this event is then what I want to do is I want to prevent default because if you recall when you submit a form or you click on a button to submit a form it will refresh the page and not actually deal with the stuff without refreshing the page right in react we we have to prevent default or else if we restart your component and refresh the URL so now that we have this over here and set up what do we do because remember when I said in client components you usually don't fetch the data you fetch it on the server component but we make this one into a client component so how are we going to fetch the data well we're going to do it by fetching it on a server component and the way I like to do this is I'm actually going to create a new route in our application I'm actually going to recycle this folder I used over here and we'll call this route prediction now you'll see that if I were to come over here into the slash prediction uh route over here you'll see that it's just replaced that just works but it shows in the information for a name that we created previously but actually I want to use a route that is dynamic so if you've ever worked with parameters and routes what I mean by this is whenever you go into the localhost 3000 slash prediction and you go slash some sort of name like Kyle or Jack or something like that what it's going to do is when you go in here it's supposed to obviously right now it's saying this page cannot be found because we haven't set this up but it should actually grab this name over here and use it in the code so the reason why we're doing this is when we come over here into our page.tsx inside of our handle.submit we're going to push or redirect our page into a route equal to the prediction slash whatever name we use and then use this name in our other component to be able to fetch the data if that sounds confusing right now don't worry you will understand so like I said we want to create a dynamic route so to create another uh that functionality of making a dynamic we're going to come inside of the prediction um folder and create a folder like this it's going to be called name because that's the name of the variable or the parameter we want to pass and then I'm going to put this page inside of here and um yes I'm gonna update the Imports and although there's no Imports and inside of this name thing over here for now if we want to get the parameter which like I said is the value of the name over here or this value over here we can actually come over here and just destructure the params which for now I'll just give a type of any but I obviously give a type later on and this play params.name which we know this works because the name is the name of the folder right we made this folder equal to square brackets name so if you follow this into syntax you'll see that no matter what I type over here after prediction it's now being used in the code because this is the param of the prediction route so that's what I'm talking about params or basically variables that you can pass or arguments that you can pass to a URL to be able to use them later on and over here we have this URL route called prediction with a param variable called name and we grab it by using the params variable over here let me access to name because it's the actual name of the param I guess you guys understood this right so now that we have that out of the way how are we going to actually redirect ourselves to this page over here when there when we click the submit button well to do that we can use the use router Hook from next.js so over here I'm going to import from next slash navigation so it's a navigation part of next.js they have something called the use router just like this and what I want to do is I want to destructure the serious router by saying const uh equals to use router just like this and I want to destructure the the function push now this function allows us to redirect ourselves to another route by just saying push and then putting the name of the route over here now where we want to go is we want to go to the prediction route slash and then we want to go to whatever value this input has at the moment so we just have to put this input valve variable inside of this so that we go to that specific route since I use backticks we can actually use the string template notation and pass in over here input value just like this now we're going to be going to whatever route is set up depending on this inputs value so let's test that out I'm going to come over here into the original page and I'm going to write Pedro uh oh I just realized the text is white so I'm just gonna come to our input and add a class name and this is the only CSS I'm going to write I'm going to write text black which obviously this is Tailwind CSS but um you see the change the colors change to Black I'm gonna click then on predict data and what I should do is redirect us to the predictions slash Pedro page which is exactly what happens so it means it's working right now we set up navigating and redirecting but we haven't set up fetching the data or anything related to that but first what we have to do is we have to set up the correct type for our params variable over here now if you're familiar with typescript again it's really simple we're just going to create an interface called params and its properties will be it will have an object called params and for us we just need a string called name to be passed to this component so that we can get the name from this thing over here so I'm just going to pass this and now we have the correct type so what do we want to do now well in order to fetch data and I'll show you guys the the API right now so these are the three apis we're going to be fetching data from I think they're owned by the same group but they all do similar things but with different intentions for example we have the genderize API where you just fetch data from this URL you put a name of a person over here and it will predict there's gender right same thing with nationalized where it gives you kind of a country code for which country they think this person is most likely part of or born in and this one is for age and I'm going to combine all three of them inside of our application so the way we're gonna fetch data because if you remember this is now a server component so how exactly would we fetch data well what we can do is we can first create the functions that are going to fetch that data so I'm going to come over here at the top and I'm going to create a function called a get or fetch I'm going to call get get predicted age let's start with age and obviously this will fetch some data so it has to be asynchronous and we need the name of the person is going to fetch the data for right so I'm gonna put name equals string as an argument we're going to pass this data down later on now I want to fetch the data by saying cons to Res equals to a weight Fetch and then pass in that URL so we're going to come back over here and grab this URL paste it directly over here as a string and obviously we have to change the name equals to Pedro to be name equals to name because we're going to customize what we fetched the data for then we're going to return res dot Json now this is basically it where this function is just fetching the data and returning the promise with the data we're going to do the same thing for the other two so we're going to do get predicted gender and get predicted country just like this all of them will be exactly the same but the differences obviously we need the um correct URLs so the only difference are this ones over here now we're going to have to call these functions inside of our actual component but you might be questioning how are we going to do this because there are asynchronous components but we can't like this is not asynchronous well with server components you can actually make them async I could come over here and make this an asynchronous function and this would work perfectly which is crazy right um with the new versions of reactive 18 and x13 this is the way you would go about it in a server component you would make it into an async component uh which would then have this functions getting the data we need for this specific component then I would get their data by saying const age data for example equal to get predicted data pass in the the name right as an argument so I'm going to say params.name and we're gonna get that data that promise over here so this is a promise so it's not the actual data yet we're going to resolve that in a second we're going to do the same thing for the other two so we're going to do gender data and country data and then this would be get gender data did I not change the name of the yeah oh yeah it's get predicted gender and get predicted country just like this now what we do is we need to resolve all of them and if we have multiple MPI fetches in like in the same component a way we can do this is we can just destructure it by using array and seeing a weight promise dot o so we're resolving a more than one promise at once we're resolving the H data one the gender data one and the country data one so that means that this will return an array in order uh with the correct data so if I want to get the correct age I can just get age gender and Country just like this and this this will actually be the data that we are fetching now I know this notation might look a little bit weird but if you understood the skeleton of it it's just you fetch the data up here with one function it doesn't have to be three functions this is just because we're using three apis three different apis in the same component but you make the request then you get that data over here you pass in that data into a promise.all if you have multiple but if you don't have multiple you just say async await obviously and you get the data back over here now that we have that we can actually use that data I'm going to create a little skeleton of a project over here so that we can display that data but again I'm not displaying the CSS yet I'm just going to add it at the end of the video but we're adding a div over here then another div and inside of this second div we're going to actually add the distinction between the classes so or the information so I'm going to add a div for personal info over here this is just a kind of like a title about the person or the a title about yeah the person you're searching for and then a div for the age which will just contain a text called age and then we're going to display the age like this now how do I know I can just say H.H well this over here this variable age should represent um whatever we get back whatever object we get back from an API request on the API this is the age API right and when you request back uh the data it should return an object just like this so this over here should equal this object depending on who you you put the name of and you can see that this object contains a property of count so if you're interested you can see how many people with this name which is cool they're in the name you search for which makes sense but also the age so if I were to say h dot h over here I'm accessing the age value this value over here inside of the age API response I hope that makes sense then I'm going to do the same thing for gender and the same thing for country but they're a little bit different you have to look at the API in order to know what you're actually returning I know the gender is just gender gender because if we check again here it has a the object has a property called gender which is what we need but the country one is a little bit different it has a property called country which is an array of multiple countries this person might be part of right because if they can't predict their actual like obviously the other ones too they can't predict but for some reason per country this is how it looks um and we just want to get the highest prediction so that would be the first element in this array and we want to get the country ID of it so what I'm going to do is I'm going to say for the country we want to get the country and then we're getting the first element so the highest probability country dot country ID now you might be wondering why am I putting question marks well because we haven't defined what is the return type or what exactly is it being returned from this API request so if we wanted to we could create an interface specifying that the API will always return an object looking like this or like this whatever but we don't want to do that right now because like whatever like it's just a simple API it would be pointless for the video so I'm putting question marks because they guarantee to me that um they won't be trying to access something that doesn't exist and I forgot to put country over here um this should probably work but when we put a question mark if you've never heard of it basically if gender is null it won't try to access the gender key inside of this object because it will know that this is null so it won't do that so this is basically why I'm putting question mark over here we should see that it should be working right so if I refresh over here with a prediction Pedro it made the API request automatically by default without using news effects or anything like that it's all by default and the information is being displayed over here which means it's pretty much working completely all I have to do is add all of the um Tailwind CSS that I said in the beginning I wrote and I'll be back in a second and as you can see I just added all of the Tailwind CSS now if you're not a fan until win you don't have to use Tailwind with um next.js I do enjoy it sometimes I've made videos on it in the past I think it's way quicker to code but I added all of this simple Tailwind class names over here which if you want to copy it's all in the description um immediate look like this which is not ugly but also not good but let's see how the website is working if I come over here and I type the name Cody you'll see that if I submit it should redirect me to a prediction page with the URL Cody and the personal info should have the correct predicted information now obviously this website is useless because like obviously there's a bunch of codies around the world without this specific cage without this specific gender I think that the gender and the nationality are more useful because you can know where names come or commonly from or which gender they're more commonly used as but the age is crazy because I know Cody's I don't know any coder that is 40 but I know Cody's that are not 40. you know what I mean and there's names like Andrea I know Andrea is a very commonly female name in a lot of places around the world which is crazy because the only place I know that is not a female name and it can be used as a male name is Italy but here it says that the nationality is Italy but it's predicting female maybe they they used it for both genders over there are from multiple genders over there um but yeah this is what I'm saying it's a stupid website but it serves to to teach you the basics of next.js which is my hope with this video to recap what we've learned we've learned how to set up a next.js application by using Create next app we've learned the basic folder structure of a next application and how to set up routes and a little bit of routing like we talked about Dynamic routes and stuff like that we've also talked about the next navigation um hook which isn't really that important but you've seen a little bit of the taste of it as it comes over here we've also talked about difference between client and server components right and how to transform a component into a client component and also how to fetch data asynchronously in the server component by making the component be in synchronous itself now this seems like a lot because it is so don't feel overwhelmed as a beginner especially if you've never coded in react before which I assume some of you might have not because like I said before you don't have to know react before learning xjs because nextjs is also react so let me know in the description if you guys are interested in me making the intermediate project obviously with intermediate project I'm not going to go over every single detail of beginner stuff I'm going to be focusing more on more advanced stuff again thank you Nord pass for sponsoring this video if you guys want to check them out it will help me so much because they are the people who help support the channel and you buy you guys checking out their amazing product it helps us as well so please go check them out in the description and yeah that's that's basically it I really hope you guys enjoyed it and I see you guys next time thank you [Music] [Applause] [Music]

Channel: PedroTech

Views: 26,592

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, nextjs, next js, nextjs project, nextjs 13, nextjs 13 project, nextjs beginner tutorial, nextjs tutorial, nextjs beginner project

Id: PtDIVU_tlo0

Length: 33min 26sec (2006 seconds)

Published: Thu Jul 13 2023