Mastering Next.js 14: A Comprehensive Guide to the Latest Features and Advanced Concepts!

again Su and wer YouTube channel so in this video we are going to be learning about what an xjs is how it works and why you should care about that so now a lot of people will ask me like hoseen I just learned react JS why on Earth should I learn about nextjs well to give you the answer to that I'm going to just give you an answer to that in one sentence but trust me that's not enough so the answer is next JS is the superow of reactjs so what does that mean well to explain all of that sentence which I just said you're going to have to watch this entire course wait wait wait wait wait entire course should I have to watch the entire course to just get to know what a next JS is yep exactly you're going to have to watch this entire course then you'll be able to learn or to know where next CHS is I cannot explain what an nextjs is not in one slide not in two slide not in countless slides but I can to fully guarantee like if you watch this entire course uh you're going to be calling yourself as a next CH Superstar anyways so now let me just Define what a nextjs is but I cannot tell you like how many features nextjs offers and how awesome it is okay so for that you're going to have to watch this entire course anyway so what in the world is next J and why you should care about that so nextjs is an open source JavaScript framework that is built on top of reactjs so if you're watching this video I will obviously assume like you already know react JZ if you don't you can watch my video on them anyways that's other topics so next ja is a JavaScript framework that is built on top of react JS so if you want to work in nextjs first of all you have to know react JS so what is reactjs so react is also a popular ja script library for building the user interfaces you already know that if you're watching this course anyways so next s is designed to make it easier to create a server side react application with a focus on developer productivity performance and SEO AKA search engine optimization something which we are going to be covering a bit later but not right now you don't have to worry about this one but you already know what a performance is if you are working with reactjs um and you also know productivity so nextjs provides a set of tools and Convention that simplify various aspects of building the web application okay so that's just the best B definition of what a nextjs is but trust me that's not it so now let's get into the key features of nextjs so nextjs offers something called SSR or you can also say the server side rendering so next just allow you to render react component on the server side before sending them to the client and this can improve the page reload time and the SEO as search engine can easily index the content something which I'm going to show you in a real world example you don't have to worry about that for now static side generation or SSG for short it also provide or it also offers the SSG as well so next is allow support static side generation where you can pre-render Pages at a build time and this approach is great for Content heavy website and can offer even better performance and SEO benefits and it also provides something car and one of my favorite one API routs okay so it offers a buil-in API route feature that allow you to create a serverless API endpoint Point within your nexts project making it easier to handle the backend logic as well and finally let me just say that next JS is a full stack framework it also offers the front end and also the back end something called a server component and also the client components which we are going to be learning in a very great depth in this course okay so for now this was just a basic definition and that was just a basic feature next year provides but yeah there are tons and tons of more which we are going to be exploring throughout this course so now let me just go ahead and go to the nextjs websites and how they call themselves so this is reactjs and react is a JavaScript blah blah blah you already know what reactjs is and this is the nextjs so if you want to come to this same website you just have to type next js. org and it will bring you to this website right here so the react framework for the web used by some of the world's largest companies and next just enables you to create a full stack web application by extending the latest react features and integrating the powerful rust based JavaScript tooling for the fast Bel so you might be asking like Huzan do I have to know rust programming language to work with next yes of course not do you have to know the backend development to work with um what do we call it to work with the next ja of course not something which we are going to be learning in this course so we are going to be learning about next ja both for the front end and also for the back end as well okay so if you want to install an xjs so this is the command to install an xjs so we are going to be also diving into that in a very great depth so that was it about the introduction of a nextjs so now let's install nextjs in our machine so let me just zoom in a bit and you just have to type this Command right here you don't even have to type that you can just click on there it will automatically copy there to your clipboard then you can open your terminal anywhere you want so in my case I'm going to open my terminal inside my desk toop because I want to create my project inside the desktop right here now let me just make that a bit bigger so you guys can see everything a bit better right here okay so now I'm inside uh C folder then I'm inside the users then hosan and inside the desktop I'm going to just right click on that and it will just past my command right here which is npx create next I mean like create D next- app and then add latest right here I'm going to hit enter right here and it will gives us this option right here like what is your your project name I'm going to give a name of like next um course or something like that I'm going to hit enter right here then it's going to ask us like would you like to use a typescript uh I'm not going to assume you guys like you already know typescript so I'm going to set that to no hit enter I mean like if you want to use that so feel free to use that time script is nothing but just providing additional types to your project anyways then it will also like would you like to use the es Len of course we do hit yes then they're recommending like would you like to use a tan CSS as well yep we already know tan CSS if you don't know that's completely okay you can totally follow along with this course but if you don't know that you can watch my video on tan CSS or if you still don't want to learn about tan CSS that's completely okay you can totally follow along with this course I'm going to set that to yes hit enter Then they would also like would you like to use the SRC directory no because we are not working with the older version of NEX year so we are not going to be setting there to SRC in instead we are going to be using the ab directory so I'm going to set that to no and this is a big no no you have to set that to no I'm going to hit enter right here then it will ask us like would you like to use the app router always always said that to yes so I'm going to just hit enter right here and then it will ask us like um do you want to provide some sort of aliases I'm going to explain what Alias is a bit later it's not that much important topic in nexts anyways uh but if you want to learn about this I'm going to explain what alas is a bit later but not right now I'm going to just set that to no so hit enter and boom it will start generating my next gen application right here inside my desktop here you can see the folder and it will start generating there all right so next just is successfully installing our machine now the next thing which I want to do is that I'm going to use CD and I'm going to go ahead and just write next and hit Tab and it will auto complete it for me I'm going to hit enter and if you are using a vs code so you just have to write code and Dot and hit enter if you are not using a vs code well what can I say if you don't want to use vs code so I don't want to say anything else but yeah God bless you anyway so I'm going to just close this one so before touching any files first of all I'm going to show you how to run nextjs application so the first thing that you have to do is that you have to open your terminal inside your vs code right here and next you just have to type this only one command which is npm run and Dev I know that's looking a bit awful in my terminal but in your teral that will look amazing then you just have to hold control and click on that and it will just open your next application right here here so they are giving us some sort of a deprecation warning but yeah it will be gone a bit later but not right now anyways so this is how our next CH application will look like once you install every single thing right here the next thing which they are suggesting is that first of all we have to go ahead and go to the app and inside this app we have to go to this page.js and then we would be able to provide anything we want okay so yeah buy or sell you can learn about a documentation you can go ahead and go to the learn templates deployment and all of that kind of stuff so now let me just hide that so now let me just explain all of these files and folder right here so the first folder we have is do next folder right here and this is a build folder So currently we are working with a development mode so this is now the development build right here but if you also use the npm rund Dev let me just uh remove that if you also use the npm run and uh build right here it will also gives us all of that data inside this next folder right here so now let me just delete that I'm going to totally delete that from my directory right here and instead of writing the npm Run build I'm going to use the npm Run Dev in this case if I just write and hit enter so it will just gives us that folder right here in a few seconds if we can wait for that let me just see why it's not giving us that okay there we go so it is now giving us that folder right here so this is the build folder the next folder which we have is the m folder and this is the hard of our entire application and we are going to be spending uh I guess 80% of our time inside this directory right here so here is our Fab icon which you can see right here this our sell icon I'm going to delete them next you can see all of that Global styling right here so currently we just have the styling just for these pages right I mean like this simple page right here so we can delete that but we also have a lot of T CSS classes so now let me just remove then sa our file and refresh nothing is going to happen I mean like something will break but yeah it doesn't matter so now let me just close that now the next file which we have is a layout. JS file so layout. JS file is a file which we are going to be reusing or it should reuse itself again and again this is also something which we are going to be diving into in a great detail later not right now okay the next one we have is a page it will only just gives us this specific route right here and here you can see that page is broken because we modify this uh global. CSS file right here anyways that doesn't matter so now let me just go ahead and delete almost every single thing which you have right here so I'm going to just hit control a and delete every single thing right here and I'm going to use R fce and here I'm going to just give a name of like home you can give him any name you want so now let me just save that and refresh so what are we getting we are now getting our home right here that's amazing too this is the heart of our nextjs app next one we have is a node modules folder and this node modules folder will gives us all of the dependencies which this next ja and also the react ja is depends on okay something which we already discussed in my react ja course but anyways that's what it is the next one we have is a public folder and inside this public folder we store the assets like um I don't know some sort of HTML file some sort of images also the svgs and all of that stuff for now we don't need that so I'm going to delete that okay so now let me just delete that now you saying like H you are deleting and removing all of the code what the hell are you doing because I want to start every single thing from scratch that's why I'm deleting all of that uh unnecessary folders and also that unnecessary code because we are going to be writing all of that code from the scratch so yeah the next one we have is a es liner. Json file we already installed es lint inside our project so that's why it is giving us just this one configuration right here but we can provide more configuration to there but we won't because we don't have to okay the next one we have is a get ignore so will just ignore all of that file which we have right here whenever we are pushing this uh project to our GitHub repository so this is a get related folder I mean like file the next one we have is a j config and as the name suggested it allows us to provide our own JavaScript configuration right here we don't have to do any of them right now this one is also important file which is the next. config.js file because here we're going to be providing all of our nextjs configuration like whenever we are working with the images we're going to have to provide the domains and whenever we are working with the redirects we are going to be also coming to uh this file right here so this one is important which is the next. config.js and as the name suggested it allows us to provide a configuration to our nexts application then we have a package log you already know that and also package.json it will just keep track of all of the dependencies which we are going to be installing throughout this project so let me just show you that currently what do we have so we just have a react react down and also the next chest right here and we working with 14 version I don't know by the time you're watching this video it might be I don't know 15 or 16 version but all of their rules which I'm going to show you throughout this course will be applied then we have a post. config docss uh I mean.js file this file is related to the ton CSS if you already know ton CSS so you already know this file if you don't know tman CSS you don't have to know tman CSS but you just have to leave it there like you don't have to mess around with this file and you just have to leave it there if you delete there so it will will just give you a few errors then we have a readme.md file and it will just show us the instruction to the user like I mean like whenever we push this project to or GitHub repository so if somebody wants to learn about our project so they can come to this read me file and they can learn more about that so currently it will just gives like uh this is an xgs project bootstrap with a create uh next app and you can run there by using the npm Run Dev or if you're using the yarn so you can use yarn Dev P&P Dev bun Dev if you are working with bun amazing technology but they do not work with the Windows operating system by the time of this recording so yeah that's why I'm not that much into the bun anyways so now let me just close that and the final one we have is a t configuration file so you can provide more configuration to your T CSS if you wanted to but you don't have to so yeah that's almost it about how to install nexs into your machine machine and all of that folders and files okay so we're going to have more folders and files a bit later but we don't have to worry about them for now okay so next we are going to be learning about routing and the page.js and also the layout. JS in a really great dep so now let's learn about routing in next year so before we getting into what a routing is and how it works and all of that kind of stuff first of all let me just mention that if you are coming from the react GS and you should be coming from the reactjs if you watching this course so you already know how to work with the routing if you don't don't worry I'm going to tell you what a routing is but for those of you who already work with the uh react routing so they already know like all of the pain of the react routing like first of all you are going to have to install a separate packages like a react router and react router Dom and then you'll have to create a separate component and then you have to write the create router you you're going to have to import all of that stuff and also uh if if you want to link that component so you're going to have to just write a route component and inside the route component you're going to have to specify the path and also the element and then you have to specify your component which you already create or you want to link that to and all of that headache okay but in next gen we don't have to install nothing we don't have to do nothing we just have to create a folder and all of that kind of stuff which I'm about to show you but first of all let me just tell you what in the word is routing in exper SS and in general also so what is routing so to put it in a simple English terms routing is like giving a direction to a website so how is that so when you type a web address URL into your browser so routing tell the website which page or thing to show you it's like a map that guides the website to the right place when you click a link or enter a web address so routing helps the website know what to display based on what you're looking for for okay so that's all of the routing definition so now let's learn about how to create routing so you don't have to do nothing but first of all you will have this initial uh domain right here which you're running like Local Host 3000 if you're running that on some other Port like 3,001 or three I don't know 4,000 5,000 or anything like that you will have to provide this domain right here and then you have to specify your endpoint where you want to go in this case we just specifically want to go to the about page so first of all you're are going to have to create about folder and inside that about folder you're going to have to just create page.js I mean like you can give any name to this folder right here but you're going to have to type that exact same name inside a URL right here but you have to keep in mind that you cannot give any other name to this page right here you have to create this page.js right here and then you would see I mean like if you navigate to that specific route then you would see that specific content which is already available inside this page right here okay so now let me just say all of that once again so in this case let's suppose if you want to create this about endpoint right here so first of all we are going to have to create a folder you can give any name to this folder but you have to work with that exact same name inside this URL right here so it doesn't matter if you give a name of like about or portfolio or contact page or dashboard or anything like login log out or anything like that you have to provide that right here and the next thing which you have to keep in mind is that you have to like yeah I'm going to say that once again you have to write this page.js file inside the specific route right here so now let me just give you the quick example of that and then you'll get to know what I'm talking about so currently here you can see we have this app folder and inside this app folder we just have only one page.js right here now let me just zoom there here you can see we just only have this one page.js right here so which means like we're currently working with the domain which is um Local Host and 3,000 right here so now in this case I want to create that same about um endpoint right here so I'm going to just right click on that and click on the create new folder and here you can give any name you want but you have to type that exact same name right here just write like you can give any name like that but you have to provide that name to that folder so in this case let me just create a folder right here I'm going to give a name of like about in this case and hit enter and now inside this about folder you have to create this page. jsx or you can create a JS if you want to or you can also work with a TSX if you wanted to so in my case I'm going to just write like JS right here you can write jsx if you wanted to but I'm going to just write JS right here let me just hit enter let me go back and here I'm going to just write RFC and this name doesn't matter you can give any name you want you can give him banana or apple or anything like that there but if you want to follow the same exact convention so um you can provide a folder name if you want to so in my case I'm going to just write about in this case because we are currently working with about uh route right here so now I'm going to just write like uh this is about page and save my file so now if I save my file and refresh that nothing is going to happen why is that because first of all we have to go to that specific route So currently we are just working with the domain but if I just WR for Slash and then I just write like about and hit enter and here you can see we are getting this is about page right here amazing you can provide a styling you can provide anything you want but here you can see it's that simple but now the next thing which I want to show you is that instead of writing this page.js if I just write like I don't know uh about. JS let's suppose and if I hit enter right here I made this mistake like countless times so that's why I'm showing that to you right now okay so here you can see I'm currently working with this about. JS and now what are we getting we are getting like 404 this page could not be found why is that because here you have to specify page come on page.js right here then it will work so here you can see it will refresh and we are now getting this is the about page but um but let me just change the color of my browser to something else that's looking awful so I'm going to just change that to this green one yeah I guess this one looks cool so I'm going to just set that to this one and I'm going to also provide the four dark page right here so that it doesn't hurt your eyes that's looking amazing now let me just change this name to like uh I don't know uh portfolio or something like that and if I hit enter right here and if I just refresh here you can see this does not work here we have to specify portfolio and hit enter right here and here you can see we are now getting this is the about page it will give us all of the content which we currently have inside our uh file right here so yeah the name doesn't matter the folder name doesn't matter you can give banana you can give anything you want based on your specific route but you have to specify this page.js right here so underneath in the description of this video you will found a link which will bring you to my GitHub repository and I want you to download this entire repository because for every single lecture I've provide all of the challenges and you have to perform all of their challenges by yourself if you can do it then just message me uh directly on either Twitter or you can just comment on this video or you can follow me on Instagram and you can just send me a message there and I be happy to help you there anyway so I guess that was it about for the basic route and next we are going to be learning about nested routes in nextjs so in some situation you would want to work with a lot of routes like I don't know you would want to work with the users then inside users you want to work with uh about then you want to work with I don't know projects and then you want to work with portfolio or something like that so these kind of stuff is called the nested routes so now let me just show you how to create a nested route so if you want to create a nested route first of all you have to follow that same convention like first of all if you want to work with like about section and inside this about section or about endpoint you want to create yet another route which will be for the user so first of all you're going to have to create that about folder and inside this about folder you have to create this page.js don't forget there like never ever forget this page.js right here by the time of this recording at least okay and then you're going to have to create another uh folder right here which will be for users you can give any name you want and inside this folder you're going to have to create yet another page right here but if you want to create like one more like uh for the portfolio or for something else so then you have to create yet another folder either inside this one or if you wanted to go deeply more nested so you're going to have to create that same folder inside this users and then inside that same folder you're going to have to create yet another file which will be page.js so just keep this diagram in mind and now let me just write some code so what I want to do is I'm going to just clear this about folder right here and now let me just create that nested routes right here so the first thing which I'm going to do is that I'm going to create a folder for the users right here and I'm going to create a file G name of like page.js right here let me just write fce I'm going to give a name of like users you can give any name you want and here I'm going to just print like this is a users page or something like that and now let me just save that and I'm going to go ahead and go to the users and hit enter right here so here you can see we are getting like this is a users page right here amazing so the next thing which you want to do is that inside this users we want to specifically go to the about or the user information so I'm going to just put about and if I hit enter you already know what we will get we will get this 404 why is that because currently we don't have any other route or endpoint inside this users folder so if you want a nested route inside this users so we are going to have to create yet another folder and you can give any name you want so in my case I'm going to just give a name of like about and hit enter right here so now inside this about folder I'm going to create here another file give a name of like page.js TS or TSX or jsx or something like this in my gue I'm going to just write GS right here GS GS let me just write the RFC and here I'm going to just write about right here there we go let me just write about once again I don't know what was that and this is about page and now let me just save this file and here you can see we are now getting this is about page right here why is that because currently we are inside a domain and inside this domain we have a users folder and inside this users folder we have yet another route which will be about right here okay so if I just remove this about and if I hit enter it will gives us this a users page if you just remove that users and hit enter it will gives us home right here so yeah that's looking amazing too now let's suppose if you want to go more deeply than that trust me we are not going to go that much deep in the projects but yeah for now I'm going to just write like I don't know projects or something like that so currently we are working with the users and inside this users we have a specific user information or about specific information of that users and inside the specific information we have a project so now let me just create a file give a name of like uh I don't know yeah you have to know uh page.js right here and then we're going to be just writing RFC come on RFC and then you can give name of like projects or something like that something like that and I'm going to just write this is this is or these are all of my projects there we go so now let me just save them so first of all we got to go to the users then we have to go to the about and inside this about we have a projects right here if I hit enter it will gives us like these are all of my projects if you go ahead and go to the about it will gives us like this is the about page if you go to the user it will give us the user's page and if you go to the home so it will gives us the home page right here so now let me just close all of the file which we have and here you can see this is how the structure looks looks like for now so we have first of all the users endpoint or route to be precise then we have the about which is inside or nested for this users and then we have yet another nested route which is projects right here okay so this is how you're going to be working with the nested routes in next ja so now let's learn about links or linking in nextjs so what in the word is link so link is a component provided by nextjs that allow you to create a link to navigate between pages in your application that's it okay and it's primary M uses for declarative client side navigation so what is a client side and what is server side something which we are going to be discussing in a few seconds but you don't have to worry about that trust me they are the most easiest thing in the next year okay and I know a lot of people say oh my God clients are oh my God Serv yeah no it's not that much difficult thing I'm going to show you every single thing about next year in this course so when you click on a link rate with a link component it prevents the default browser full page refresh and fetches the new page content on the client side resulting in a faster and smoother user experience and it can be typically used uh in the components jsx code for the clickable links to lead to other pages with your next JS application and all of that so that was just a quick definition of what a link component is and now let's just learn that right here okay so now I'm going to just remove all of that coding right here I know it will give us that popup box because they are a lot of f ERS yeah we have to wait for that so the first thing which I want to do is that I'm going to just collapse this folder and I'm going to create a folder inside the root folder right here and I'm going to give a name app like components you don't have to create this folder inside the ab Brey you're going to have to create a separate or a client side component something which I'm going to discuss in a few seconds you're going to have to create that client side folders I mean like why am I saying folders you're going to have to create the CLI side components inside this components folder and this folder should be located inside the root right here inside this root this roote I'm talking about it should not be inside the a directory right here okay so now inside that I'm going to create a separate file I'm going to give a name of like nailbar uh yeah nailbar would be fine Nail Bar GSX would be fine and I'm going to use RFC and here what I want to do is that I guess that would be but I'm going to just remove a few things so first of all let me just write my name then I'm going to write my UL then I'm going to write uh I don't know do with a class of logo or something like that it doesn't even matter but I'm going to just write logo okay so now underneath this uh div right here I'm going to create the links container let me just go back so that you guys can see everything a bit better inside this links container I'm going to just write link and that's it okay so here I'm going to just remove this K and let me just reite there and here you can see we are now getting this suggestion which is next for SL link we don't have to import something called the next for/ navigation we don't want to do that we want to import or navigation or or specific link from the next for slash link and if you are like doing that quickly so it will just Auto compet like this so it will just Auto compet like next and then uh not application but navigation you don't want to work with them because this is deprecated and we have to just remove them and we just want to import a link from the next and for/ link right here so you just have to also keep that in mind the next thing which you have to do is that we have to provide the location so here we have to just write HRI totally exactly the same like or anchor tag so you can think about that is like our anchor tag in our HTML right here okay so in this H what do you have to do we just have to specify the path where we want to go so we just want to go to home so I'm going to just write home right here so home that's it now let me just duplicate that three times so then you want to go to the about and we also want to go to the portfolio right here so now I'm going to also change that to about and let me also change this one to portfolio there we go okay and you know what I'm going to also provide the class name of link it doesn't matter if you want to provide the link class or not but for me I'm going to just provide this link class right here and we did not use this nailbar component somewhere so let's just use that so the first thing which I'm going to do is that I'm going to go ahead and go to the app directory and then I'm going to go to the global. CSS file right here and I'm going to just Prov a bit of CSS like display of flex I'm going to fast forward the video so justify content will be space around so these are all the styling that you have to provide right here like first of all for the UL then for the link and then also for the H1 right here anyway so that's for the stying so now let me just go ahead and create a folder um should I create a folder first of all you know what I'm going to go ahead and go to the layout uh file right here you don't have to worry about what a layout file is but for now what I want want you to do is that you just have to import what do you call it the nail bar right here then you have to copy them and inside this children right here what do you have to do you just have to execute this n right here so once you do and sell that and let let me just refresh so here you can see we are now getting the logo then we are getting the home page I mean like the home link and then the about link and also the portfolio right here okay so if you click on the home it will obviously brings us to the home if you click on the about it will brings us to the about page which is currently not available so that's why we are getting 404 if we click on the portfolio so it will brings us to this portfolio page right here which we already did not create yet okay so let me just click on this home once again and I'm going to just close this layout file right here the next thing which you have to do is that we have to first of all create one for the about folder or about route to be precise so I'm going to just write route and let me just create a page. jsx or not jsx JS let me just write RFC and about would be fine okay let's just close there now let me just create one more for the what do we call it portfolio and page.js now man JS let me just write RFC and for the portfolio there we go so now let me just save that and now if I click on the about page it will brings us to this about page right here if I click on the portfolio so here you can see it will now brings us to this portfolio right here why are we navigating to this different kind of routes then because we use this that's because we use this link right here okay so let me just go back so if you click on the about it will brings us to this about page if you click on the portfolio it will brings us to portfolio if you click on the home it will brings us to this home right here amazing so this is what we have to do for the link component for now I mean like that's what the link component offer for the next yes so now let's learn about what in the world is used router so we already learned about what a link is and we already know that link is a component provided by the next CHS so what in the word is a use uh router so use router is a hook provided by next year that allow you to access the router object and its properties within your component and it provides the programmatical control over the router and allow you to navigate to different pages or perform other routing related action in response to user interaction or event within your component and it's useful when you need to handle the navigation or access route specific information directly in your component logic okay so I know I said it very quickly but this is what it is you don't have to go to the documentation and learn about that but this is just a hook which do the same thing as the link but it also gives a control over or navigation okay so now let's just learn about that so what I want to do is that I'm going to delete all of the code which we already wrote so now let me just delete this component and I'm going to uh delete this uh portfolio for now and now I'm going to also remove this NAB bar from here and also remove the na NAB bar import as well so now let me just save that and what I want to do is that first of all uh I'm going to go to the page right here so now let me just go ahead and come to the page and I'm going to just change that to something else like I don't know section would be fine and inside this section I'm going to just write like uh I don't know routing I guess routing would be fine or use router would be fine so now let me just save that and here you can see we are now getting the used router everything is okay so the next thing which you have to do is that we have to grab the use router right here so I'm going to just go ahead and go to the use router and we have to get that from not the use I mean like from not the next router but we have to get that from the next navigation in this case if you are grabbing the link let me just say that once again if you are grabbing the link you're going to have to grab that from the next link but if you are grabbing the used router you're have to grab that from the next navigation okay so that's that now let's just create an instance of this user router right here so I'm going to just give a name of like router you can give any name you want because this is just variable and we are going to be storing the value of the use router right here and let's just execute that right here okay so yeah that's that now let me just use that right here so let's suppose if you have some sort of a page so uh what I want to do I'm going to just create a button in this case and I'm going to just write like how many routes we have we just have one about route right here go to about page or something like that okay so in this case I'm going to provide the onclick event handlers so anytime we are working with some sort of a handlers or yeah I'm going to explain that in a few second but that will require you a bit more of the next year's knowledge but you just have to provide this plag for now which is a use client just provide there and save there for now so please just provide that and I'm going to explain what in the world this is in a few seconds so please just provide this use client like this is totally important you have to provide that because currently we are working with the on click and also we are importing something anyway so now I'm going to explain that in a few second but first of all you have to uh write this use client directive okay so now inside there what I want to do is that I'm going to just uh pass my function and I'm going to just say like router. push in this case it will just go to the about page right here in this casee now let me just save there this is what you have to type and now here you can see we have this button right here but that's not looking cool so I'm going to just click on that and here you can see it well brings us to this about page right here okay so this is a button trust me this is a button I'm going to put a little bit of styling to it so you guys can see what it is so let's just provide classes of border and padding all around will be or you know ping for the xaxis will be two and ping for the Y AIS will be four or something like that and here you can see we have our button right here so if I click on that it brings us to this about page right here why is that because we are currently using the used router and here we are creating an instance of that and inside this router we have now this push method and we want to push the user to the about page word here okay so this is the first way right here let me just remove this styling from here this is the first way of using the use router right here and what is the next way the next way is to just create some sort of a function and you can reuse that function again and again okay so in this case I'm going to just write like uh I don't know const you can give any name you want for your function so in my case I'm going to just Pro like navigate or something like that and here you have to specify some sort of a page ID this is a parameter you can also give any parameter you want so in my case I'm going to just provide a page and now inside that I'm going to use this exact same thing so I'm going to cut that from here and I'm going to just place it right here instead of providing this about let me just cut that I'm going to just copy this page and put it right here and now I'm going to copy this navigate and put it right here execute that and here we just have to specify where we want to go so in this case we want to go to that about page so what in the world are we currently doing so now let me just explain all of the things which we currently doing first of all we are importing the US router then we are creating an instance of the use router and we are storing there inser a router variable then we are creating just a simple function which will just reate or push the user to a specific page so we are grabbing that page which we are specifying it right here so in this case we are specifying about and then we are just using router. push and we are just pushing our user to that specific page right here and now here you can see we have that same button and if I click on that and here you can see it now brings us to this about page right here okay totally amazing now we can also use for the login page or something like that let me just go ahead and create a login folder login and create a file and I'm going to use the RF come on rafc of login or something like that or you know what I'm going to just write this is a login page or something like that and what I have to do is that I'm going to just duplicate that and change that to the login right here and go to the login page I'm going to save that and here you can see we have that let me use a br and here you can see we have have about page and go to the login page so if I click on the login it will brings us to this is a login page right here totally amazing so now what's the difference between the use selector and also that nav or not nav but also that link okay so let me just grab there I'm going to go ahead and grab that from this next and Link and it will just go to projects or something like them I'm going to use the H and go to the projects let me just save them we add their projects right here inside the app directory projects and create a page.js RFC projects right here sell my file and let me also provide that BR for this one as well so I'm going to use a br sell my file so we have this uh projects right here if I click on the projects and it will brings us to this projects um route right here so now what's the difference between the link and also the use uh rou right here we already learned about these slides but let me just reiterate all of that stuff once again so link is a component provided by nextjs and it will just allows our user uh to navigate from one page to another without the paging reload and with a smooth or yeah faster and smoother experience on the other hand we have a used router this is component this is a hook right here which also the nexs offers us and it will also allows us to um gain some information about that specific route but we don't have learn about that for now so that's just the difference between the link and also the use router and we are going to be coming to this use router once again a bit later but not right now all right so that was it about for the link and also for the use router the next thing which I want to talk to you about is how to skipe a folder as a route right here so I'm going to delete that first of all so now here you can see oh I just deleted all of the code anyways so now here you can see if you navigate to some specific folder like I don't know about section or something like that and if I hit enter it will obviously gives us a 404 not found um error message right here but now let me just create two more folders the first one will be for the login and I'm going to just create a file page.js and RFC come on RFC of login and sell this file now let me just create one more okay let me just zoom in a bit and one will be for the register okay so page.js and I'm going to use the RFC and registered there we go if I sell them and now let me just go go ahead and go to the about not about but login let me just go ahead and go to the login so here you can see we have a login and I'm going to also go to uh what do we call it the register so register and hit enter so here you can see it will now gives us register right here okay so now what I want to do is that I'm going to create a separate folder once again and you know what I'm going to give a name of like O Part here and inside this off I'm going to also write page.js right here and I'm going to also give a name of like off and create a component inside there okay so now what I want to do is that I'm going to just grab both of these folders and I'm going to put it inside this off right here so now what do we have to do to access this register well first of all we have to write the off then we have to go to the register right here and if I hit enter then we would be able to come to this register page right here first of all we have to write this off and then register but now in some situation we don't want to create um this off end point right here but we do want to create some sort of a folder to organize our code so how to skip this specific route right here which is this off well you don't have to do nothing else but you just have to wrap that with these uh parentheses right here let me just zoom in a bit so you guys can see everything a bit better you just have to wrap that with these parenthesis and here you can write any name you want okay and now if I hit enter oh it's going to take a bit of time because I already created this folder and there we go so here you can see let me just say that once again if you want to ignore a specific folder to be as a route you just have to wrap the folder name as parentheses okay so you just have to write the parenthesis and then you can write any name you want and then you have to close that parenthesis right here I me like this specific folder will not be called as an endpoint now inside this off folder we have this login uh endpoint right here and we also have this register right here now let me just check this out so here you can see we are now inside the off and we are also inside register right here so that's why we are getting this 404 page so if I just remove this out from here and if I just hit enter right here so it will gives us register and if you want to go to the logins now let me just write login and hit enter and here you can see it will giv us a login once again but if I write that off one one more time like off and login it will gives us that 404 page not found error right here so this is how we are going to be ignoring a specific folder to be as an endpoint all right so now let's learn about Dynamic routes in nextjs so what in the word are Dynamic routes and why you should care about there so Dynamic routes IND next just refers to a feature that allow you to create a web page with a variable or dynamic Parts in the URL instead of defining individual routes for every possible URL you can create a single route pattern that matches every variety of dynamic values and this is extremely useful when you have a pages that shares a common structure but differ based on a specific information in the URL okay so that was just a basic English definition of a dynamic routes so now let me just show you how we are going to be creating web pages without the dynamic routes right here so I want you to imagine for a second that if you're working with a lot of users data so you're going to have to create a lot of routes for them like a specific user and then we have a Alex then we have John hosan and let's suppose if you have like thousand users so first of all you're going to be creating a users folder or a user route whatever you want to call them and then inside there you're going to be creating the Alex for John for hosan for Jordan and for all of that users so this is how your folder structure will look like without using a dynamic routes so now let me just show you how you're are going to be creating a dynamic routes this is how you're going to be creating a dynamic routes okay so first of all you just have to create a users folder and you also like obviously have to define the page.js right here and then inside there you are going to be creating just this bracket open and then the folder name and then the bracket close and inside there you have to just write this use CL and this is something which we are going to be learning very shortly and then here you just have to specify the prams and here you can just specify your Dynamic logic which we are going to be doing right now okay so I want you to just uh see this syntax once again first of all you're going to be creating your uh main route and inside that you're going to be creating your Dynamic route right here okay so now let me just delete this off folder right here and I'm going to create a lot of other folders right here so now let me just show you the without a dynamic routes way so now I'm going to just create a folder given name of like uh I don't know users users list and hit enter and inside that we're going to be creating our page.js and RFC and users list right here now let me just save that and inside this folder we are going to be creating for a lot of user like John and he will have that page.js one more time and I'm going to use the RFC for John come on John now let me just save there go back and I'm going to just duplicate there like a lot of time one time two time three time four time or something like that I'm going to change that to Alex let me just change this one and oh I also forgot we are going to be also changing that to like Alex and also if you have like a lot of user information like the username the user date of birth the user password the user email and all of that so we are going to have to change that again and again so here you can see we would have to just write Jordan and we would also go ahead and go to that page and we would have to change that to Jordan or something like like there for all of the users so now let me just delete both of these folders so here you can see we are just currently working with three users right here and we have to create this folder and inside this folder we have to create this page um page.js and here we have to specify that logic I mean like that same logic again and again okay so now if you go ahead and go to the user list and inside the I don't know I want to go to the John and if I hit enter was John j o h n y we are not getting oh it should be users list not a user users list and if I hit enter and here you can see it will giv us information based on John and if you go ahead and go to AR know Alex it will give us Alex if you go to AR don't know hosan and it will now bring us oh we are getting this 404 that's because we don't have any um hen user right here anyway so now let me just delete them and now let me just show you how you're are going to be creating a dynamic routes now let me just zoom in a bit and inside this user list I'm going to create a folder give a name of like anything I want in this case I'm going to just write like uh I don't know a specific user right here okay and I'm going to also have to wrap that with brackets a few seconds ago we just saw the parenthesis like if we just wrap that with parentheses which means like we are ignoring this specific folder to be as a route but in this case we are providing a bracket right here let me just zoom in that a bit more so here you can see we are using these Breakers right here okay so if I hit enter and now inside this we are going to be just creating one page right here so page.js and I'm going to just write like r a fc and user would be fine user there we go let me just go back and now if you save that and now let me just go ahead and go to that hen right here so it will gives us this user if you go to like I don't know uh John and if I hit enter so it will give us that same user once again okay so now what I want to do is that I want to do a bit of magic well to be honest it's not a magic but let me let me just write prams right here so we are going to be just restructuring this prams and it will give us all of that prams right here or perimeter whatever you want to call that I'm going to change that to use client and you should do the same okay so the next thing which I want to do is that I'm going to just write console log of PS one more time and if I sell them and if I just refresh and let me just go ahead and check this out so here you can see we are getting this user and we have the value of pram which is set to John right here so where in the world is this user coming from and where in the word is this value coming from first of all where is this user coming from this user is this folder name right here which is specified right here so it will give us that object with this property right here and this value is coming from this Endo right here which we specify that so now let me just write like my own name and if I hit enter and here you can see we are now getting the user and we are getting this husan right here okay so we can also just uh log that to the console or we can print it out right here so I'm going to just delete that and I'm going to just use H1 and here I'm going to just write like info about I don't know um prams do user right here okay so if I just save that so here you can see we now getting like info or information about a specific user which is hen right here if we change that to something else like uh I don't know Jordan or something like that so here you can see we're now getting Jordan and that's that now we can also just write like hello I am um par m. user right here and if you save them and here you can see you're now getting like hello I'm Jordan right here so this is how we are going to be creating a dynamic route in uh not expresss but in nextjs all righty so now let's learn about a catch all routes in nextjs so in next J if you create your folder by using this same convention like first of all you're going to have to write the opening bracket and then dot dot dot you can call it the rest operator or uh the sprit operator whatever you want to call all there and then the folder name and then the closing bracket right here okay so this convention is known as a catch all routes and this notation indicates that you are using a catch all routes which allow you to capture multiple URL segment what is a segment I'm going to show you that in a few second and treat them as a dynamic array of values and this is useful when you want to create a dynamic routes that can handle varying number of URL segments okay so this is how we are going to be creating our folder we only just have to create our folder by using this convention so I want you to just keep that in mind okay so in this case we would have like a lot of uh segments right here like this users is a segment this Alex is a segment projects is a segment then e-commerce orders and also this specific ID is a segment so all of these are called segments of a URL so if you want to catch all of them at once in some situation you would so for that you going to be creating your folder by using this convention so first of all you're going to have to write the opening bracket then dot dot dot out and then your folder name and then the closing bracket right here so this is how you're going to be creating that so now let me just show you that in a real word example so now let me just delete that and I'm going to also delete this users from here and we are going to have to provide or confirm there right here delete there permanently cool so now let's suppose if you're working with a lot of projects so I'm going to just create a folder with the name of like projects and inside that we're going to be also creating page.js and I'm going to use the RFC of projects and now let me just save them and inside there we are going to have a lot of projects like um I don't know I work with a lot of projects so we can create projects for e-commerce for portfolio for I don't know like we would have a lot of projects inside this uh project folder so what I want to do is that I want to catch all of that segments right here so let's suppose you have this kind of Link like I don't know first of all you have a projects then you have a e-commerce project and then inside is Ecom Commerce project you have a specific product and then a specific product will also have some sort of ID and you also want to buy that or not buy but order that specific product so you're going to also have to write a order and then you'll also have some sort of order ID and if you hit enter so these are all called a segments so first of all we have a project segment then we have a e-commerce then we have a project then blah blah blah then order and also blah blah blah once again so if you want to catch all of them at once so for that we are going to be creating this folder or this Con V mention so first of all we are going to have to write our opening bracket then dot dot dot Three Dots and then my folder name will be all okay and then I'm going to just close that right here now let me just create a page.js right here and I'm going to use the rafc and uh I don't know I'm going to give a name of like project there we go and now if I just sell them and here you can see we now getting this project right here we are providing like all of that segments right here but we are still getting this project right here which means like we are getting all of these segments from this specific URL right here okay so that's cool the next thing which you want to do is that let me just make that as a client component I'm really sorry about that I have to explain all of these routing stuff then I'm going to explain this uh what is a client component and also the server component so you're going to have to just stick there for a few seconds so I'm going to just write this prams and you already know what it will gives us let me just show you there one more time we have Rams and now if I just refresh them come on let me just refresh them so now here you can see we have this object and inside this object we have this all right here where is this all coming from this all is coming from this folder right here and then we have all of their segments right here like we have e-commerce we have project and we have blah blah blah we have order and we also have a lot of other random words right here okay so this is how we are going to be capturing all of the data so now let me just comment this line out and I'm going to go back so you guys can see everything a bit better and now inside this T what I want to do is that I'm going to just write H1 and project and here we are going to be just writing like programs. all because we want to get this specific uh array right here so now I just save there and here you can see we are now getting project and we are now getting all of that array right here okay so that's cool now I'm going to just write BR for breaking and all routes right here routes there we go and you can also even iterate over through there if you wanted to so I'm going to just write brs. all and let's suppose if you want to itate over through all of them so we are going to be just writing like paragraph paragraph not paragraph but just a specific project and now inside there we are going to be just writing like um I don't know I'm going to write lii inside there and here for the key we are going to be specifying like P and here we just also have to render this P right here so now if I just save that and here you can see we are now getting all routes we are now getting this segment this segment and all of that segments right here okay let me just go back in some situation you would need this uh what do you call it uh this oh my God this catch all routes I can't even remember the name of that this catch all routes but for a lot of time you won't but now I show you them and now you know that how you are going to be catching all of the segments from a specific route now that we learn enough about routing so the next thing which I want to show you is called the catch all routes right here so I'm going to delete this folder from here let me just confirm that because I'm a window user so I'm going to have to confirm the deletion okay so right so here you can see we have this 404 page right here why are we getting this 404 page because currently this URL is not defined so if I just remove that if I just hit ENT right here so we are getting this page but if I go to like I don't know the about page or something like that which is not currently existed so we are now getting this 44 page not found if you want to change that to something else this is how you are going to be doing this so now first of all so now inside this app folder you're are going to have to create this same name file you can not give any name to this file you're going to have to give this specific name to your file which is not- found. JS or TS or TSX or jsx right here in my case I'm going to just give a name of like JS so here you can see if I just hit enter right here so my file is successfully created and if I just write like RFC and I'm going to just give a name of like not found and if I save that and here you can see we are now getting not found right here why is that because currently this route is not defined so that's why we are now getting um not found right here if you just uh try to access something else like about and then the specific user like Huzan and then Alex and then blah blah blah or something like that and if I hit enter so here you can see we are going to still get this not found page and you are more than welcome to provide a lot of styling to it like four or four page not found and you can provide a lot of styling to it I know there is a lot of things you can do with this specific route um which you can handle by using this file right here you have to provide this not- found. JS right here if you change the name to like something else like I don't know not phones if I just provide this s right here at the end and if I hit enter right here it will just gives us that default page right here like always keep that in mind like whenever you're are creating a 404 not Fone page you're going to have to give this specific name to your file and then you can do a lot more stuff than that so I just write like four or four page not found you can do like crazy stuff like you can provide script tags you can provide like I don't know some sort of interactions and you can also provide animation and all of that kind of stuff but in my case I just want to write 404 page 404 not so that's why we are now getting this specific um page word here there we go so now let's learn about redirects IND nextjs so I'm going to just write redirect and hit enter right here let me just make that a bit bigger so word in the word is redirect and why you should care about them so the redirect is a function which next is offers so the redirect function allow you to redirect the user to another URL and redirect can be used in the server component and also the client component something which we did not learn not right now and also the route handlers and also in the server actions as well okay so first of all you just have to grab or import the redirect and here you just have to use that like first of all you have to write a redirect and then you have to execute that function you have to specify the path where you want to redirect the user and also if you're using a typescript so you have to specify the type right here and they are providing this example right here for um what do we call it for the server components but we're not going to be using that in the server components right here okay so what I want to do is I'm going to just create a folder given name of like about and inside that we are going to be creating or come on oh my God page.js right here and I'm going to just use like RFC of about right here let me just save that and I'm going to also create ID right here or dynamic ID would be fine because we are going to be catching the what do we call it the segment so I'm going to just write rafc one more time and I'm going to just give a name of like ID save my file and I'm going to also create one more folder for the login one and I'm going to also just write page.js and R of login right here okay so now let me just save that and now let me just go ahead and go to come on if I can get the if I go to like about and if you just specify some sort of a segment of two or specific ID of two so here you can it will give us that ID right here and if you type anything like anything and if you hit enter so it will give us that ID right here oh my God I cannot catch oh there we go so it will give us that ID right here so what I want to do is that I want to just block a specific user from my uh website so uh I'm going to just first of all grab the user ID so I'm going to just write prams and here we are going to be using that rams. ID and now if I save that and here you can see we are now getting that specific ID right here which we are specifying right there and if I hit enter so here you can see we are now getting that specific ID so what I want to do is that I want to provide a conditional statement so I'm going to just write um if Pam pam. ID is equal to four let's suppose if the user ID is four so what do you want to do we just want to redirect that specific user with the login page word here okay so they're going to have to first of all uh specify their user credentials and then they would be able to access that page so we are going to get from the navigation and now we successfully get there and now if you sell our file and here you can see it will gives us two um right here but if you just specify for and if I hit enter uh why it's not working I guess I'm going to have to restart my server let's just restart my server and now let me just check this out and if I hit uh refresh and I hope it should redirect uh to the login page and guess what it's not uh okay so prams ID so we just want to redirect the specific user to the login page so we are providing the if you just write two and hit enter it will gives us two if you just write four and refresh them oh my God what in the world is happening you know I just figure out the solution we should not be using triple equal we are going to be just using double equal to right here so if you just sa that and here you can see it will now redirects us to this about I mean like this login page right here if you go ahead and go to the about page and if you just type like two or something like that and if you hit enter it will now gives us this two right here but if you just specifically specify this four and if you hit enters it will just redirect us to this login page right here so this is how we are going to be using this redirect function which this nextjs offers all righty so finally now let's learn about a server component and also the client components in reactjs so what in the word is server components I mean like there are a lot of things that you have to cover so I'm not going to go into them much detail into what in the word is a server component client component all of that but I'm going to just give you a quick test of that and you can found all of their documentation in this next year's uh official website right here so what in the word is server components and why you should care about them so react server component allow you to write the UI that can be rendered and optionally cached on the server in nexj the rendering works with a further split by Route segments to enable streaming and partial rendering and there are three types of rendering strategies like a static rendering Dynamic rendering and also streaming you can learn more about them if you wanted to but you don't have to okay so what are the benefits of the server rendering the first one in our list is a data fetching and there are a lot more like a lot you can explore the rest of them by yourself but I'm going to just give you a quick test of the first one so data fetching so server component allow you to move data fetching to the server closer to your data source and this can improve the performance by reducing time it takes to fish the data are needed for rendering and also the amount of request the client needs to make okay so we also have a security as& M just we have a caching benefit we have a bundle size and we have initial page reload and all of that kind of stuff which you can export by yourself and by the way by default nexs uses a server components and if you want to make them as a client components so we've been using the use client which I'm going to also show you in a few seconds but anyways I want you to keep that in my life by default next just uses a server component and this allow you to automatically implement the server rendering with the additional configuration and you can opt into using a client component when need to see this documentation yeah we will okay so I'm going to just click on this uh client component so now the question is now we learn about what in the world is a server component so now what in the world is a client component so a client component allow you to write an interactive UI interactive like the keyword is interactive you got to keep that in mind so so client component allow you to write interactive UI that can be rendered on the client at request time in next CH client rendering is an opt in meaning you have to explicitly decide what component react should render on the client okay so what are the benefits of that whenever you are providing some sort of interactivity for your specific components so you got to make your component as a client component so client component can use the stats like so like anytime you want to work with a state you're going to have to make your component the client component and effects like a use effect and all of the other effects and even listeners like event listener like on click on submit and on how or yeah there are a lot of them meaning they can provide immediate feedback to the user and update the UI okay so now let me just show you that quick diagram right here which we have if I can find it okay it's not available in here but it is right here inside this composition patterns so you can learn more about them but here is our diagram right here so where to use the server components and where to use the client components so anytime you want to fit some sort of a data so for that you're going to be using the server component right here not a client component and anytime you want to access the backend resources directly so for that you're going to be using the server component not a client component and keep sensitive information on the server like um the JWT tokens and also the API keys and data base connection and all of that kind of stuff you're going to store that inside a server component not on a client component and keep large dependencies on the servers like um I don't know there could be a lot of there could be a lot of large dependencies so for that you're going to have to store them inside a server component not a client component so anytime you have some sort of interactivity like you just have to think about that like anytime you have some sort of interactive work like like the user should do something like the user should click on um I don't know a button which will show some sort of a popup box or if you have some sort of effects of that you're are going to be using the client component right here so like add interactivity and event listen like on click on change on submit and all of that kind of stuff you're going to be using this client components so used and life cycles effect uh like used use reducer use effect and there are a lot more like use ref and use reducer and all of that kind of stuff so for that you're going to be using the client component not a server component and anytime you want to use the browser only uh API so for that you're going to be also using the client component like a local storage and uh I don't know a set timeout and all of that kind of stuff so for that you are going to be using a client component not a server component and in some situation you're are going to be also creating a custom hooks which depends on the start and effects uh or a browser only apis so for that you're going to be also using a client component not a server component and finally um use class component so for that you're going to be also using the client component right here okay so now let me just show you what in the word is a client component and also the server component so for that I'm going to just delete both of these file I mean like folders and let me just confirm that because I'm a window user so confirm check that to yes and delete that permanently okay so I'm going to just create uh I don't know client or something like that you can give any name you want client client would be fine yeah I guess client would be fine and I'm going to just create page.js and I'm going to just write RFC of CLI baby I'm going to save this file and I'm going to also create one more for the server uh they are giving us different kind of icons for the fer so I'm just a bit suspicious about that so client one would be fine and also server two would be fine you can give any name you want by the way doesn't even matter but yeah I'm just wondering like they will give us some sort of an error so I'm going to have to write a page.js uh and I'm going to use the r fce of server uh one right here and I'm going to also change that to the client one right here as well so now let me just save that and what I want to do is that I'm going to go back and inside this client component client one component I'm going to just write the cons. log of hello uh hello from the client comp component right here okay so I'm going to just write this hello from the client component I'm going to copy that and I'm going to just place it right here as well and in this case I'm going to change that to the server come on server component right here so I'm going to just save this file save this file as well I'm going to just clear out my terminal and I'm going to use the npm Run Dev and now let's check out what's going to happen Okay so first of all we are going to be going into this rout which we have like a client one right here uh should I provide the one in upper case and lower case let me just change that to the lower Cas my bad sorry I'm going to also change that to lower gu as well so we have as well so we have a client one and also the server server server one as well what the hell am I doing or server two rather come on uh let's just go ahead and this should also be um server two sell my file and what I want to do is that I'm going to go ahead and go to my page right here and I'm going to open my uh inspector right here and I'm going to go ahead and go to the console real quick let me just go ahead and go to the console and I'm going to go ahead first of all to the client one route right here and if I hit enter so here you can see we are not getting anything inside this console right here why is that because we are getting that same message right here on the server side so what's going on as we learned that by default or components are a server component right here come on if I can get that oh my god that's way Beyond H default if I can get that bang okay here we go so here you can see by default next just use as a server component and if you want to make it as a client component so for that you're going to have to just write this directory which is a use and client there we go baby you just have to write there and now let me just save there and I'm going I go ahead and restart my server once again and now if I just restart them and let me just check this out once again so here you can see it will just broke our application right here but uh if it can render it right here and now here you can see we are getting this hello from the client component right here but we are also getting the hello from the client component right here as well so why is that so now currently our component is both a client component and also so the server component okay so like you can do all of the what do we call it the on click event handler you can do like use effect and all of that kind of stuff so that's why you can see that message that same message right here inside a terminal and also inside this console like the browser console as well on the other hand we also have this uh message right here inside a server component so we have like hello from the server component right here so now let me just go ahead and go to the server two right here and if I hit enter and now here you can see we don't have any messages for the browser console but if you check it out so we can see this message inside this terminal right here which means like this is just a server component and this is the client component right here so if you want to make your component as a client component so you just have to use that and here you can learn more about like um where to use a client component and where to use the server component right here and we'll learn all of that kind of stuff right here and by the way you're going to also see a message some sort of a message like you know let me just quickly give you the example of there I'm going to just close this one and I just remove that use client right here I'm going to also remove that and I'm going to just use like button right here and I'm going to just right click me okay and in this case I'm going to just provide the on click Handler and which will just say like uh I don't know um you know I'm going to just specify alert or yeah this function will be fine alert hello and now if I sell them and here you can see if I just access this client one right here and if I hit enter right here it will give this amazing error right here it will say like event handler cannot be passed into the client component props it will give us their function error but on the other hand if we change that to the client component if I use like use client and if I save them and here you can see we are getting this button right here if I click on that we are getting this hello right here so everything is working successfully and smoothly and this is how you're going to be creating the server component I mean like the client component and this is how you're going to be creating a server component right here that's it baby that's it so now let's learn about a layout file which we saw in the beginning of the course and I just said like we're going to be taking a closer look at that layout. JS file a bit later but not right now so now is later anyway so what in the word is a layout so a layout is like a blueprint that help you to make all the pages of your website look the same and it's a way to put a common things like haer and other stuff that appears on every page in one place and this makes it easy to keep a similar look on all of your web pages so layout is a handy tool that lets you keep things tidy and consistent on your website okay so this is just a quick definition of what a layout is so now how in the word layout looks like right here so now let me just give you a quick example of that let's suppose we have some sort of a homepage right here inside that homepage we have a lot of content but in this case I just put like homepage and then a home emoji right here but we want this same navigation in all of our Pages like we want this popular recent today and also the search um input field right here also notification bar and also the image we want the same navigation on the homage on the about page on the users page and all of that kind of stuff okay so how can we go about doing that well the answer is we are going to be using this layout. JS right here so in the layout. JS file uh we can create this navigation separately and render the inside a layout. JS file or we can create this uh navigation as well layout file I know that sounds confusing but trust me it's not so now let me just give you a quick example of that and then you'll get to know what in the word is a l. JS file so what I want to do is I'm going to just delete both of these folder right here and I'm going to just create a few more folder right here give a name of like login and inside this login we're going to be creating our page.js R fce of login right here sell this file and inside this login we are going to be creating two more folders the first one will be for login admin right here and Edge Edge page.js and let's just write RFC and admin or login admin or yeah I guess admin would be fine and I'm going to create one more for the regular user so like login user right here and page.js RFC of user right here now let me just save there and close this one out as well so now here you can see we already have this layout. GS file right here which you can see in all of the pages like we have um this inner font which we are using and this is something else which we going to be also discussing a bit later but not right now so you know what let me just create the same layout file or not the same but let me just create a layout file inside this login and we are going to be reusing that layout uh in all of our routes so for that we are going to be creating like layout. JS okay so lab. JS and in this uh case we are going to be just writing r fce I'm going to give a name of like L and I'm going to also grab all of the children because we are going to be passing all of the rest of the content right here so inside there what do you want to do first of all you want to create a div and inside this D we going to be creating our Ur you can give any name you want I mean like you can give any class you want and we are going to just give a class of like login menu and inside there I'm going to just write Ali right here and the link and this link will be coming from this na link right here and I'm going to just P like login main or something like that okay so now let me just duplicate that two times and I'm going to also provide H to them so let's just select this one select this one and also this one and I'm going to Pro a and here we just have to specify the first of all the login and then we have to go ahead and provide a login for the login user like a regular user I'm going to also change the level of there to like something um login regular user right here and also let me just provide that login admin right here login admin here as well and login admin right here so now let me just save that so now here underneath this Ur we're going to be also passing our children right here so now if I just save that and here you can see we are now getting four or 400 pound but now let me just go ahead and go to the login right here so yeah here you can see we have this login right here on this main page of this login right here we are currently accessing this login right here let me just highlight that we are currently accessing this login route right here so that's why we are now getting this navigation right here but let's suppose if I go to this uh login as a regular user and if I click on that so here you can see we now getting this user and in this case we are now grabbing this route which you can see right here the login user rout right here but we can also see uh that navigation that same navigation right here in inside this user component as well we did not use that I mean like we don't have this navigation as a component and we are not re using that same component right here but we can still access that navigation right here why is that as we learned right here like it's a blueprint that ljs is a blueprint that help you to make all the pages of your website look the same okay so in this case we want to reuse this navigation on the regular screen on the main screen if you have like more than that you would be still a to see that navigation on all of the pages so if I go to the login admin right here so here you can see we can also uh see that same navigation right here like nothing is changing right here doesn't matter if you go to the regular user if you go to the login main page or if you go to the login admin page we would still see this login right here okay so this is how we are going to be creating a login um I mean like this is how we are going to be creating our layout right here and this is just navigation right here you can separate that to like you can put the separate component if you wanted to so now let me just cut that from here and let me just go ahead and create a components folder comp oh my God components and now let me just create like NAB bar. JS and I'm going to just put it right here by using RFC and let's just put all of that content right here semi file and I'm going to also grab this next right here and put it at the top now let me just save that and put the nail bar right come on not name but na bar uh right here and now if I save that and refresh and here you can see we now still getting that same navigation bar right here we can provide borders we can provide anything we want so now in this case I'm going to just specify like a border and here you can see we have this border right here we can change the background color to like green of 400 or something like that and here you can see we have all of that navigation that same navigation right here we can create one for the folder if you wanted to so now let me just create a fotter component like a f. jsx or JS would be fine and I'm going to just write like rfco fter and copy right at Hen web dev or something like that doesn't even matter but underneath this uh what do we call it this children we are going to be creating our footer right here now let me just close that and S my file so here you can see we now getting this footer and we can do crazy amount of stuff like if you go to a regular user so here you can see we are now getting their user we are also getting the navigation and also the footer as well we can provide the header we can provide the sidebar we can do a lot more stuff than that but that was just a quick test of what in the word is uh that layout. JS and how it works so that was just a quick test of what in the word is layout. JS so now let's learn about a conditional layout right here okay so what I want to do is I'm going to go ahead and go to my layout right here and here what I want to do is that uh I'm going to just grab one thing right here which will be the use path name right here and I'm going to execute there and it will be coming from this next navigation right here we are importing there right here and now we have to store there in some sort of variable so I'm going to just use like path name you can give any name you want and I'm going to just log that to the console like path name and now if I saell them and by the way uh let me ask you a question we are currently importing this use path name right here so do you think it will work or not so now let's just check it out okay so we are now getting like usth only works on a client components so now let me just ask you one more question how in the word should I make this component as a client component so you have 3 seconds to answer that yeah you are right you're not wasting my time so you just said that like use client and save this file and Banger right here so everything is successfully working but we also have to check out the path name right here so now let me just close all of that stuff out and restart my server once again so that we can see that path name right here let me just refresh that and we would hopefully see that path name coming right here oh my God it's taking a lot of time and there we go so here you can see let me just highlight there here you can see we are now getting this path name which is a login and I mean not login but which is a login and login user right here so we are now successfully accessing the path name like the current path name which is a login and login user right here so we can provide a conditional check right there um so how in the work should we do that uh you know what what I want to do is I'm going to just cut that from here let me just save them and I'm going to go ahead and um yeah I'm going to go ahead and go to my na bar and I'm going to put that right here and I'm going to also cut this path name right here and put it right here and I'm going to also cut this use client from here save this file and put it right here inside this Nail Bar right here okay so you and I both know that we can now successfully access the path name so now let's just provide our conditional check right here okay so let me just put it there right here what I'm going to do is I'm going to just WRA first of all every single thing by using a div doesn't even matter but I wanted to so now I'm going to just check if the path name is not equal to one the path name is not equal to login and also the login admin so what do you want to do in that case we just want to cut out this UL right here and also we want to cut out the admin you know let's just remove this one from here don't need that I'm going to cut um this one out yeah I'm going to cut this one out and I'm going to just place it right here and by the way I'm going to also explain the code what I'm doing right now but you just have to bear with me so now let me just cut this out and put it right here there we go so now I sell there we will obviously get an error um yeah yeah we will we okay we have to cut that from here and put it right here sell file so what are we doing if the path name is not equal to or not not equal to if the path name is equal to login and login admin so then we just want to only provide this login admin right here if that's not the case we just want to provide this UL right here which is login as a regular user right here if you save that and now let me just go ahead and here you can see let's just remove that ugly color from the background uh okay so let's just remove that from here that save my file and here you can see we now getting the login regular user right here why is that because we just provide this login user right here that's why we are not seeing this login uh regular user but instead if I just provide like login admin right here and here you can see we are now getting this login admin right here so this is how we are going to be checking for this how we going to be providing a conditional check so I'm going to just remove this folder from here we don't need ERS uh I just want to show you that that's why um I just create a foldo right here so here you can see we have a login as an admin and we are now seeing the admin right here but if you just put like login user and here you can see we are now getting this login user right here so this is how you're going to be providing a conditional check and by the way this is how you're going to be getting the path Name by using this hook right here use path name that was it about the use path name and the conditional check and also the layout all right so finally inside this layout section we got to learn about something called the generate metadata so let's just remove that and also remove this folder of components as well and now let's get into it so you know what first of all let me just even show you there and here you can see we already have uh okay we don't have that so here you can see we have this metadata right here and you can find this metadata for every single page right here and it will really help you in the SEO like you can provide your um tags you can provide your description you can provide your title you can provide anything you want and you already learned about metadata in my HTML course if you already watch that if you don't so you don't even have to like uh watch the course just for a metadata so now let me just show you like how in the world this is going to look like and how we are going to be creating our own so here you can see we have a create n app and this is what we are getting right here as a title if you can see can't see that oh my God I don't know what the hell I just did H let's just close that let me just reopen there once again my bad so now let me just go ahead and go to uh anyways there we go so here you can see we have this create next app right here as a title but if I right click on that and go to inspect area okay here you can see we have metadata and we are providing this description right here and the content was like generated by create next app and generated by create next app right here if you wanted to change that to something else so we can just generate by hen webd would be fine hen webd right here and I'm going to also change the title to hen web dev website or something like that now if i s that and here you can see the title is changed and also the description is changed so here you can see my title which is huzen website and you can also um what is the description I just lost that uh where is our description oh there we go here you can see we have our description right here which is generated by henb right here so now we modify the existing one but let's suppose if you create a separate folder for like users and if I just create like page.js right here R AFC of users right here come on users will be fine and if I sell that and now let me just go ahead and go to the users right here and if I expand my head so if I expand my head if I expand this head tag so here you can see uh we we are now getting that title right here we are now getting the same title excuse me you're getting that same title word here and also the description right here generated by hus webd if you want to modify this specific um page right here this specific uh metadata for this specific page so how can you go about doing that well we don't have to do nothing else but we just have to write export cons and then generate meta data right here so this is how you're going to be creating this uh function right here and inside that you can just return a specific metadata right here so in this case I'm going to just provide like title of uh I don't know this is this is a user um user page right here and also we can provide a description d s c r i p t i o n and the description will be all about the users or something like that and if I save that and here you can see we change the existing data right here so so we have like this is a users page and we also have um description of like all about the users right here uh so this is how we are going to be creating our function and this is how we are going to be returning uh this specific data right here and that can be very useful for the SEO for the search engine optimization all right so now let's learn about images in nextjs so now you might be saying like Huzan I can render the images in reactjs yeah you totally can but there is a bit of catch in nextjs okay so here is the unsplash.com and you can search for a lot of images right here and you can get a lot of great images the point I'm making here is that you can go ahead and download the image you can use the external images and you can also use the internal images but for the external images there is a bit of catch so you know what first of all a huge shout out to this person which name is OC G uh Zig sorry I can't pronounce your name bro or sis but yeah you did an amazing job and now I'm using your image right here so now let me just cut this image from here and now let me just go ahead and go to my uh folder right here and I'm going to just create a not but public file right I mean like public folder public and now inside this public folder I'm going to place my image right here okay so here you can see if I can show you that here you can see we have this public folder and we just have this image right here okay so what I want to do is that we already have our route right here first of all let me just get that image so I'm going to use like import nature image from where let me just go ahead and go to the public folder and inside this public folder we have this image now let me just copy that and put it right here okay so now I'm going to use the image tag and I'm going to use the nextjs image tag in this case I am a g and I'm going to get that from the next and image if I can get that uh let me just go ahead and import the image from where from the next and image right here okay so now here we have to specify the Sr r c for the SRC we are going to be using the nature image now let me just copy that and now let me just place it right here and we don't have to close that like that we just have to close it like this way okay and I'm going to also provide the alternative text so for the alternative text I'm going to provide like nature image from unsplash or nature image would be fine so if I just save that and if I just rendered that and my browser crashed so I'm going to just restart my server once again now let me just check this out let's just refresh there and here you can see we are now getting this amazing image right here shout out to that person I forgot the name of that person but I'm going to give you the link to his profile in the description below you can check out his work anyway so here you can see this is how we are going to be rendering the image but let me just provide alternative text but also I'm going to provide the width of I don't know WT come on W and the width will be I don't know 500 right here and I'm going to also specify the height of 500 as well so now let me just save that so now this is how my image currently looks like but I want to show you something I'm going to just uh erase my browsing history but I guess I'm not going to show you that because I watch a lot of of things which you don't supposed to watch so I'm going to clear out my browser history real quick um so yeah this is how my browser history looks like anyways so if there is something inappropriate I'm going to hide there uh I'm going to just clear out that and I just want to clear out the K share right here and clear the data data is successfully cleared now I'm going to just right click on that and go to the inspect area go to the network panel one more time and just refresh and here you can see the nextjs automatically optimize our image right here like do you think where image is at that size let me just show you them I'm going to go ahead and go to my folder one more time and now let me just show you the properties and it is 6.16 megabyte of image and what next just did next just compress our image to that size right here now let me just increase the size right here like I don't know maybe 100 or you know 1,000 would be fine 1,000 of height and also 1,000 of width right here so now let me just save that and refresh that one more time so now here you can see the size is increased but not that much this is just 135 kiloby but what we saw a few seconds ago was 6.6 7 megabytes okay so yeah the next J will automatically optimize your images and this is how you're going to be rendering the internal image so now let's talk about the external image so what I want to do is that I'm going to just create my image right and by the way you have to use this next just image tag right here then then it will optimize your image but if you use the regular image right here it won't okay so you have to use the um next is image tag so then it will optimize your image anyway so that's that now the next thing which I want to do is is that I'm going to use this image tag one more time let's just close that and uh close it like so I'm going to provide the SRC right here for the SRC I'm going to go ahead and go to uh these images and I'm going to just select this image right here shout out to this person Co coino AI or something like that I can't pronounce the name of this guy but anyways I'm going to right click on that and copy the image address right here and now let's just hide that right here from here and I'm going to also place this link right here and alternative text I'm going to provide like um I don't know nature image once again like nature image would be fine so now if you save there and what are we getting we are now getting like image with SRC this link is missing a required width property okay let's provide a required width property so let's just provide a width of like 100 to this one and let me just provide the height because it's going to also ask us for the height as well so now let me just save there and what are we getting we are now getting like invalid SRC prop of this prop on next image um host name image. nash.com is not configured under the image in your nextjs config you can learn more about that if you wanted to but what basically they're saying is that if you're using the external link so you have to specify the domain uh inside the next config.js file which we already saw right here so here you can see we have next. config.js file and we have to provide that configuration domain right here and inside this next config we just have provide images and images for this images we are going to be providing our object and inside this object we have to specify the domains okay so for this domains we are going to be just specifying this domain which they are suggesting which is images. unsplash.com so we just have to copy that and paste right here and kny server file and refresh that and there we go so here you can see we are now getting our image right here and this is how you are going to be working with the images in next yes so always remember this like so if you saw that um errors so you have to specify this images and inside this images you have to specify the domain and if you are working with multiple domains you just have to provide a comma and then some next domain or something like that okay so yeah that was about images in nextjs so that was are about for the images now let's learn about fonts okay so currently we are using this enter font by default but in nextjs you can use almost every Google font right here so you can just go to like fonts. google.com and here you can search for a lot of fonts right here and I'm going to show you how to use them so now let me just use like one of them like I don't know maybe yeah yeah I have like one in mind so I'm going to go ahead and go to my page right here so I'm going to use first of all import Roboto and from the next and here you can see we have F and then we have a Google formont right here okay the next thing which you have to do is that we have to create an instance of that so I'm going to use like a Auto you can give any name you want and here we have to just create the robot right here and we also have to specify the subset like subsets and it will have the subset of like Latin let's provide the weight I'm going to provide like 500 right here so now if you want to use that so how can we use that let me just remove all of that kind of stuff and I'm going to just write like fonts or Google fonts rather and I'm going to use like I don't know um H2 of here we are going to be providing the class name and for the class name we are going to be providing the Roboto and then the class name right here okay so this Roboto is coming from here and then we have to specify this class name right here okay and I'm going to also use like hello this is uh Roboto font or something like that and let's just remove all of that stuff from here and also from here as well now let me just save there and this is how it looks like and now let me just check it out so if I just refresh there oh you know what I'm going to have to delete this users from here we don't need that so let's just delete that refresh okay the user is not available so we just got to go to the homepage and now here you can see the differences this phone is not using a Roboto font and this phone is using a Roboto font with the 500 boldness or weight whatever you want to call that now let me just go ahead and click on inspect check out this font and I can get there uh you know what that's other story you can see the differences right here uh this one isn't using the Roboto font and this one is using a Roboto font you can search for any font you want and you can use it like this first of all you have to import them and you have to create an instance of that and inside that you're going to have to provide the subset and also the word if you wanted to and if you want to use this so you are going to have to first of all um provide that instance and then you have to use the class name right here so you know let me just copy them let's just copy there and let me just place it right here so you guys can see everything so now let's just save that and here you can see both of them are now using the Google phone I me like the robot phone from the Google fonts right here all right so that was it about the fonts in nexs right here so I'm going to just remove both of them out and I'm going to also remove them and change that to H1 of next.js complete for by hen web right here so now let me just save there and also remove the use client from there and here you can see we now getting there amazing so the next thing which you have have to do is that we have to learn uh how we are going to be fetching a data in nextjs by using the client component not a server component which we are going to be also learning next but now in this specific section now let's just learn about how we are going to be getting a data from some sort of like third party library or third party API uh by using the client component so I'm going to just create a folder given name of like data you can give any name you want but in my case I just give a name of like data right here and I'm going to just create a page JS right here and I'm going to use the RFC and here we have to just change the name of that to like data and as I said that we are going to be fetching this data by using a client component so we have to convert that to the client component right here so if you save that and let's just go ahead and go to the data right here and here you can see we now getting the data amazing so yeah the first thing which you have to do is that if you are fetching the data so the first thing which you have to do is that we have to first of all grab the use effect and also they use stat for here okay so that's then now the next thing which you have to do is that we have to initialize where we are going to be storing the result of our data so we are going to be just providing the product I mean like I'm sure you guys already know all of that stuff but I'm going to just say it anyways and set um product right here and it will be now equals to the use stad and inside that we are going to be currently setting there to the empty uh empty array right here next let's just use the use effect right here and inside that what do we have to do we just have to create our async function right here the async and function I'm going to give name of like P data and it's not going to take any parameters and now inside there we're going to be just declaring our data and now let's just use a and fetch there right here we are going to be getting our data from some uh API some Dy API like uh I guess just in placeholder would be fine I already know the link to them but anyways let me just show your document oh that's super white so now let me just make the um dark there we go that's looking amazing so here you just have to copy that link and I'm pretty much sure that you guys already know all of that stuff right here so now let me just copy that and put it right here and now uh instead of writing their other stuff I'm going to just write post right here post and also let's just convert this data to the Json format so I'm going to use like data. Json and now let's just convert that right here and I'm going to also use the uh con log of data so that we can see the data or the results so now let me just use that fetch data function right here and let's just call our dependency array and now let me just save that okay so I'm going to just right click on that and go to the inspect area so now let me just expand that and here you can see we are now getting all of the data right here okay so we can now get the body from the data we can get the ID the title the user ID and all of that kind of stuff so next what we have to do we just have to write a set product and here we just have to push our new product to it that's it baby that's it so now if you just save that and you cannot see anything because we have to it right over through this data right here okay so now let's just remove that and instead of writing a div I'm going to change that to UL and inside this UL what do you want to do we just want to it right over through all of the products so I'm going to use like products if we have the products so we just want to iterate over through them so I'm going to use the map method in this case and we want to get a specific product and now let's just iterate over through all of the products but first of all we have to provide our react fragment uh to remove all of the conflicts and here we just want to get the product and the specific product ID and now let's just save there and why in the word it's not working let's just refresh that okay so here you can see we are getting the IDS right here oh my God that's a lot of idas uh you know I'm going to just remove that from here let me just write my right here and I'm going to also provide the key of paragraph ID because we don't want to get any errors and I'm going to also render my paragraph. title and now let's just refresh that right here uh and why it's making it in one liner I'm not quite sure about that um but it is making it as a oneliner uh we have a UL let's just remove that from here why are we getting this data in one line you can see the data right here I guess we provide a CSS or something like that do we have a CSS let's just remove this public we don't need that and yep we already Prov the CSS so let's just remove that and here you can see we are now getting all of that data right here okay so we can provide a little bit of staring to it if you wanted to like Borders or something like that and here you can see I'm going to also PR margin all around a five and yep that's looking cool pairing for the Y AIS will be two pairing for the access will be set to four and yeah here you can see we now getting all of that data anyway so this is how you're going to be fetching a data by using a client component next let's just learn about how we are going to be fetching a data by using a server components so we don't have to do nothing else so we just have to remove that and we also have to remove all of that stuff from here and the first thing which you got to do is that um first of all we have to create our function right here or async function because we want to create I mean like we want to use as synness operation so we have to create sing function so we just have to use the pitch data and here we just have to remove that and let's just use let data and it will be now equals to A that same function which we have and I'm going to go ahead and go to my Json Place holder copy that place it right here and I'm going to go ahead and grab the data from the specific posts and let me also convert that to the Json format so I'm going to use like a data. Json and also return the data right here okay so that's then now let me just use this function right here server component and I'm going to use like let products and it will be now equals to A and fish the data right here and we can log that data or products to the console and now let me just create a div inside this div you you want to itate over through all of the products if you have the products then we want to iterate over through them if you don't have the products then we want to I mean like then we don't want to do anything at all I forgot to convert this function as a sync function okay let's just copy there from here and put it right here this sing function and inside there what do you want to do you just want to create a paragraph and I'm going to just provide paragraph. tile and let me also use the key and for the key we are going to be providing the ID right here let's just go back so you guys can see everything a bit better now let me just save that and I'm going to go ahead and here you can see we have all of that data right here and if I check out my console so inside this console we are now getting all of that post right here so we have L post which you can check it out in your spare time which is totally gibberish by the way so yeah this is how we going to be fetching a data uh by using a server component so in this case we are not using a set uh set State we are not even using uh what do we call it uh oh my God we not even using any stats and all of that kind of stuff and by the way if you just open right click on that open over console and open or console and here you can see nothing why is that them because currently we are fetching this data by using a server component and you can see the result of this console log right here inside a terminal not inside a web console right here so this is how we are going to be fetching a data by using a server component and also the client components all right so now we learn enough nexs for the client side or you can say for the front end now let's just slowly shift our gear into the backend development and I know when somebody hear the word backend development they say like oh my God who back in development I don't know nothing about back in development what the hell are you talking about and they just get scared and trust me back in development isn't that much hard thing to learn and especially in nextjs in nextjs it is totally simple and easy so we are not going to be doing a lot of craziness in the back and development side but I'm going to just show you like what you need to do for creating an API and also like posting getting the data and all of that kind of stuff so what we've been doing is that anytime we want to create a route right here like a data route or any route right here so we just create a folder we give him some sort of name and then inside there we create a page.js file and there we go Okay so we've been doing that a lot and this is how you would do that but for the backend first of all you're going to have to create a folder and you have to give the name of API word here so currently we are working with the API so you have to create your folder by using the API and inside there which means like like we are now inside the backend development word you got to keep that in mind so once you create your API folder which means like you are now entering to the back development word so don't be scared trust me it's simple and easy and now let's get into it so first of all let's just create our route right here inside or our first API inside this uh API folder so what I want to do I'm going to create one more folder and we're going to be giving name of like users right here and inside this users I'm going to going to create a file g a name of like page no you cannot provide the page name right here because you are currently inside the API and as I said like anytime you are working with the API folder you are inside the backend development word and always remember like anytime you want to create a route for that you are going to be creating the route. JS file right here okay not a page because you are currently inside the a AP word so you're going to have to create your file by using the route. JS not the API JS I can stress that enough okay so yeah that's them now first of all let's just learn about the get method okay so we have a few methods in backend development like we have a get method we have a post method we have a put method we have patch uh delete yeah we have that few of them which I'm going to also show you throughout this course and we are going to be even building a simple fake database application in a few seconds anyways that's other story so first of all we are going to be writing export and then we just have to create a function and that's it that's it baby we just have to create a function but this function will be special function you cannot give any name to this function you have to provide a specific method name in this case in upper case we are going to be just writing get which means like we are getting some data okay so in this case we are going to be just writing like I don't know if I want to print some response to user so I'm going to just return and you have to import one thing called Next response. Json and here we have to specify some sort of result right here I'm going to just say like result of hello and that would be it okay so if I just sell my file and now let me just check this out so I'm going to go ahead and go to users right here and if I hit enter and here oh my God what's that users us e RS oh first of all we have to write the API my bad first of all we have to write the API and then we have our users right here and if you hit enter and here you can see we are now getting this result and we are now getting hello right here okay completely amazing totally working a okay and now if you also want to provide the status code you don't have to worry about what a status code is but if you want to learn more about that so you can just quick Google search like what in the world is a status code and all of that so now let me just refresh that and I'm going to go ahead and go to the users right here and and I'm going to go ahead and go to the header and here you can see our status is now set to 200 which means like this is totally okay right here if you want to change that status to something else you have to specify the comma and here you just have to specify the status of like four or four not found or something like that and if you save that and now let me just refresh that so here you can see our status is failed and we are now getting 404 and this page is not found which is not true if you want to provide a status you can but you don't have to okay so what we learned let me just reiterate all of that stuff which I just said if you want to work with the backend development in nextjs first of all you have to create this API folder and inside this API folder you are going to be creating your end points you're going to be creating your API and all of that kind of stuff right here and then in this case we just want to create one endpoint for the users so that's why we just create a folder called users right here and never ever forget that you have to create this route. JS file inside your um endpoint right here not page.js if you working with the front end uh index JS so you have to provide page.js but if you are working with the back end development so you have to specify the route. JS right here and inside that we just create our function right here you already know how to create a function but here you have to specify the method name right here so the HTTP method name there is a lot of them which I'm going to explain a bit later but for now we just want to work with a get method and get method as the name suggest that it allows us to get some sort of a data so in this case we are just showing some sort of data to the user uh but yeah you can show like anything you want you can provide like success and uh hello this message is successfully delivered or something like that and now if you save that and refresh that and here you can see it will gives us that same message word here okay and I'm using extension that's why I'm getting this user interface but in your case it's not going to look like this now let me just copy that and I guess it's not working in the cognitive window and this is how it's going to look like in your case I guess and I'm using extension I don't even know the name of that extension but yeah I'm getting all of that data right here so yeah this is how we are going to be getting uh I mean like this is how we are going to be sending the respond to the user right here and now let's learn about how we are going to be creating a lot of data and how we are going to be showing all of that data to the users okay so what I want to do is that or you know first of all let me just show you how you're going to be working with the dynamic routes in the back end okay so let me just sare um the syntax will be totally the same like if you want to work with the dynamic routes in backend so first of all you're going to have to write this bracket and then you can give any name to your folder so in this case I want to give name of like ID and inside there we are going to be creating one we are going to be creating a route. JS right here and inside this route. JS we are going to be just creating our function and let's just create our function for or export right here and in this case we don't want to get the request so you can have access to the request and also to the response if you wanted to so in this case we are not interested in the request so I'm going to just provide this Dash which means like just ignore that and we want to get the response right here so you want to work with the response so I'm going to just unlock to the console like response rams. ID right here why are we providing the ID because currently we name our Dynamic route as ID so that's why we are providing that ID right here let me just open my console let's just restart every single thing right here and that's ready and I'm going to just provide some sort of ID like I don't know four will be fine and if I hit enter and it's going to take a bit of time this page isn't working why is that no HTV method exported oh we have to send some sort of response right here my bad so we are going to be using next response and then we have to use that Json and we have to provide some sort of message like result of hello or something like that it doesn't even matter in this case so now we have to save there and refresh I don't know why I guess we have to restart the server once again and yeah my bad uh I'm going to have to provide a get right here okay so I you just uh save them and refresh them and here you can see we are now getting the result of hello right here but now let's just check out our console and we are getting this SP right here why is that because we are just handling that by using their programs right here okay so we can just like destructure that from the response so I'm going to just write like const and if you guys don't know what a destructuring means so you should definitely check out my um JavaScript course which is like about I don't know 14 hour or something like that so yeah let me just get the specific ID we don't want anything else we just want to get that ID right here and instead of providing that and all of that kind of stuff I'm going to just specify my ID right here and now let me just save them and now if I just refresh so here you can see we now getting the ID of four right here if you just write two and hit enter we are now getting two if you just write like I don't know 1,000 and hit enter and here you can see we now getting 1,000 right here so this is how you're going to be working with the dynamic routes in API or in backend development whatever you want to call that okay so what I want to do is that I wanted to work with a lot of data in this case so I'm going to go ahead and go to the f file right here I mean like this F folder and I'm going to create a UIL right here UIL folder and I'm going to just create a db. JS right here and inside this file I'm going to write a lot of uh people right here so cons users uh we are just creating our own API so that's why we have to write a lot of username right here so I'm going to just create um one object the person would have the ID of one in strings by the way and the person will also have some sort of a name like Alex meron or something like that and we are going to be also providing the H to like 29 or something like that and the email address will be alexm gmail.com or something like that and also we have to provide some sort of a password for the users so I'm going to write like Alex meron uh I don't know one two three or one two would be fine so now let me just duplicate that like a few time and I'm going to just past forward the value so we have these few user inside database let me just go back we have a Alex we have a quagmire from the Family Guy we have a Jordan we have Mike and Tony and finally we have meh the meh Emoji right here okay so we provide the ID name Edge email and also the password to it and I'm going to also give you the link in the description below which will bring you to my GitHub gist or maybe yeah it will bring you to my GitHub gist and you can copy all of them and paste it inside your application you don't have to like write that if you want to write it by yourself feel free to do that so what I want to do is that I'm going to go ahead and go to my users and inside this users I'm going to go ahead and go to my route right here okay so let's just remove the success message from here I'm going to save this file but I'm going to also get my users right here let me just import them from my app then UT then the DB right here and here we just have to specify our users right here I'm going to just create a separate uh variable for that and I'm going to store my users inside them and let me just put my data and now let me just save that and I'm going to go ahead and go to the users and hit enter and here you can see it gives us this six users so we have five like we have this user one we have user two and all of that kind of users right here later in the same where we are going to be performing a lot of operations on this same db. J uh JS file like we are going to be creating a user we are going to be updating a specific information about user we are going to be deleting a specific user and yeah I guess out here and we are going to be also searching for a specific user and all of that kind of stuff which we are going to be doing in a few seconds so now let's learn about middlewares in nextjs So in nextjs middlewares are a function or pieces of code that run in between the user request to a web page and the server response and they help you process and modify the request or response and adding an extra functionality to your web application so what do I mean by all of that gibbish which I just said so if I ask you a question like how the web works so I'm assuming that your response going to look something like this we will have a user and we will have a server so the user is going to send some sort of request to the server and the server will give us some sort of response back but in the middle if you want to add some sort of functionality so you totally can by using a middle we okay so let me just say that once again the user is going to send some sort of request to a server and the server is going to give us some sort of response back to their user but in the middle if you want to provide extra functionality or logic so for that we're going to be using a middleware let's suppose the user want to access some sort of a route which needs the user credential like the user email the user password and the username so if they don't provide that credential you want to use some sort of a middleware to redirect their specific user to the login page and once they provide their user credential then they would be able to uh get a response from their specific rout right here okay so I know there's a lot of theory so instead of giving you Theory now let me just show you some code then you'll get to know what I'm talking about so I'm going to go ahead and go to I already searched that let me just go back so I was here and I just search for a middleware right here so it gives us this response so a middleware allow you to run a code before a request is completed and then based on the incoming request you can modify the response by rewriting redirecting or modifying the request or response header or responding directly right here okay so this is the next chance definition of what a middle W is and you can learn more about them but the convention is if you want to work with the middle Wares and trust me I know when I say like middle Wares uh a lot of people get scared like oh my God this is some sort of a backend term and that's going to be a lot of confusing word and no it's not trust me it's totally simple and easy the convention is first of all we got to create this middleware either TS or JS if you are working with a Time scripts so that you're going to have to use a TS if you working with a JavaScript so for that you have to use JavaScript okay so inside there and I guess you might be set to this typescript right here so if that's the case you can change that to JavaScript right here so in this case what they are doing is that first of all they're creating this middleware right here and they are redirecting the user to the homepage right here and they are using this metalware let me just say them they are using this metalware just for this specific route right here they are using for the abound and all of the route they're using a dynamic routes right here I know that sounds confusing but I'm going to give you a real example but I'm just trying to read the documentation in the front of you they're creating a middle where they are redirecting the user to a homepage and then they are configuring like where should this middle we this specific piece of code run or I should say in which route should this piece of code Run Okay so they are providing the about and for the about they are um creating I mean like they're working with the dynamic routes so we are going to be doing the same like this one so first of all what I want to do is that I'm going to create my middleware but we are not going to be creating our middleware inside F directory we're not going to be creating it inside a API directory and we are not going to be creating it anywhere right here we're going to be creating our um what do we call middleware inside a root directory so I'm going to just write like middle wear. JS right here if you are working with a Time scripts so for that you have to write TS but we are working with JavaScript so we going to have to write uh JS right here so the first thing which you have to do is that we have to first of all export a function so let me just write a function and I'm going to give a name of like Middle where and it's going to take a request and inside there I'm going to just write like conso log um Middle where ran or something like that and I'm going to also send some sort of response to user so I'm going to use like uh next. response and here I'm going to use a Json and I'm going to just provide like success or something like that uh success fully run or something like that and now I'm going to save this file next we have to give it a direct Direction like where this middleware should run so in this case I'm going to just uh give a direction of uh you know first of all let me just create export cons and config and it's going to be equals to this object and inside this object we're going to be providing the matcher and in this case we just only want to run this middleware specifically for uh users list and we want to get uh a specific path or you know what we want to get all of the paths so you know first of all let's just create all of these users list and then a dynamic route inside that user list and we're going to be calling this middleware for all of this user list and that Dynamic list right here so now let me just save that and I'm going to go ahead and go to the app let's just create a folder given name of like users list and inside that I'm going to create my page.js RFC users list save this file and now I'm going to just create a dynamic route of user and close that and here we're going to be using Pages or page.js RFC and user right here so now let me just save that and now let me just go ahead and open my terminal right here and I'm going to go ahead and go to the uh another API and I'm going to go to the users list and I'm going to just provide hosen in this case I'm going to hit enter right here so what do we get we get successful or success message and successfully ran and if we open our terminal so we are now seeing middleware ran right here which means that our middleware is successfully working amazing so yeah we can do a lot of stuff right here like um we can redirect the user we can get the user credentials and all of that kind of stuff but for now what I want to do is that I'm going to just write F statement right here and I'm going to just say like request. next URL uh. path name let me just WR path name uh is not equal to just one not equal to login so what do you want to do you just want to write uh return next response and we just want to redirect the specific user to this homepage right here like new URL and we want to go to the login screen and we want to just write request URL right here okay so let me just go back I'm going to sell this file and now let me just create my login component so login.js R fce login right here semi file and now uh what do we have to do if the path name is not equal to the login so then we have to like uh first of all get the user to the login page so let me just refresh that one more time time and here you can see it will redirect us to the login page so then if you provide our user credential uh then we would be able to access that specific route so in this case if I just write like users list and if I didn't specify anything uh and if I hit enter so here you can see it will now redirect us to this login page right here why is that because here we are providing that logic right here let me just remove that and we can also do that by using just a nexts redirect right here so I'm going to also remove that and I'm going to use the redirect and in this case I'm going to just write new URL and here we just have to specify the login and also we have to specify the request.url word here so now if I save them and now let me just go ahead and go to the users list room come on users list and I'm going to just go to the hosen and here you can see it will still redirect us to this login page right here and you are more than welcome to provide a lot of functionality to it okay so like you can do crazy stuff and we're going to be also doing crazy this stuff throughout this course but not right now and that was it about the middleware index Jaz so now let's learn about a sensitive information aka the local variable or the environment variable whatever you want to call that okay so I'm going to go ahead and search for there you can just search for there by using EnV or environment variable however you want so I'm going to just click on this envirment variable right here and there we go so next just comes with a built-in support for environment variables which allow you to do the following so use the env. loal to load environment variable and you can learn more about that if you want to so basically if you have like some sort of a sensitive information about your specific project like I don't know the user uh password or the database password or the database user or the host or also like I don't know if you have a PayPal password or the PayPal client ID or some sort of a sensitive information which which you don't want to push to your gab Repository so for that you're going to be using this Dov and then local local or local whatever you want to call that you can also go with just do EnV if you wanted to but next just prefer to go with this env. local right here okay so now let me just create there so I'm going to go ahead so I'm going to just create it right here inside my root so I'm going to write EnV Das local right here or not Dash but do local right here and if I hit enter right here so here we can do a lot of stuff uh like for example in expressjs not in nextjs you can also provide your port code right here like which kind of Port you want to run your application on you can also provide a database URL so in this case I'm going to go ahead and go to you don't have to worry about what Mongoose is but if you wanted to so I will highly recommend you to at least check out my mongod dbn Mongoose course and trust me you're going to love it and mongod dbm is something which you have to know uh to become a great developer so I'm going to it is just a database uh no SQL database you will love it anyway so I'm going to just write and then URI and it will be now equals to this U right here and I'm going to just change that to like uh I don't know husen uh husen DB or something like that or you know husen would come on man test was fine I'm going to just write a test okay so here you can see we now successfully provide or mongodb URI right here you can provide anything you want and you can also provide later in this course so we going to be also providing the JWT uh secret as well so now let me just also provide that JWT secret and JWT secret will be like anything you want like literally anything you want all of these gibberish right here and you can also set uh your nde enironment like uh to either development or to production so I'm going to just write like node EnV it will be now set to development there we go so now let me just save that and now let me just give you a quick test of there but we're not going to be going into that much detail of uh what in the word is the EnV is so I just give you a quick definition of what EnV is here you are going to be storing your sensitive information about your specific project right here and you will never push this env. loal file to your giab repository and if I open this.g ignore and here you will found thatv okay and here you can see we have this EnV and this local right here so you will never ever push this EnV local to your G have repository if you did so it's your lost anyway so now what I want to do is that I'm going to remove this API right here I'm going to also remove all of that stuff but I'm going to leave this util there let's just remove them and let me confirm that right here that was confirmed deleted successfully and what I want to do is I'm going to just create a folder give a name of like random doesn't matter the folder name and side we are going to be creating page.js right here now I'm going to use the RFC and Page would be fine okay it doesn't even matter so if I just write like uh console. log come oh you know we don't have to write console. logs I'm going to go ahead and go to the random right here and it's going to give us this page right here now that we successfully register all of our sensitive information inside this EnV file right here so now the question is how in the word we are going to be accessing there so well you just have to write cons. log if you want to log that out by yourself so you're going to use their process come on P CS come on P cs. EnV and then what you want to access so in this case let's suppose if I want to access this URI so I'm going to just provide this URI right here okay if I sell this file let me just reload there once again because anytime you change something in this EnV file you have to restart your server otherwise you're going to get unexpected errors or unexpected things okay so now let me just refresh that once again and this random one right here here and come on oh here you can see we are getting this URI right here so we have this mongod DB 12701 uh and also this test right here which means like everything is successfully working you can also like get what do you call it um JWT secret which you already U registered so I'm going to write JWT secret let me just save there refresh there and here you can see it will also gives us that JWT secret right here and if we just want to get like um what do we call it or node node EnV and now if you save there and here you can see it's going to set to development so that's why we are now getting development right here so everything is working successfully but let me just give you a quick test of there like how you're going to be using that so I'm going to just provide like conditional statement like process process.env and Monga U right here so if you already have our URI so we just want to print this result like database successfully connected or something like that otherwise if that's not the case so we are going to be providing this result of H1 come on H1 and it gives us amazing error like 404 DB not found there we go so now if you just save there and if you check it out so here you can see we are now getting database successfully connected but on the other hand if I go to my env. loal and if I just remove that uh first line of code and if I save there and here you can see we now getting four4 database not found right here you're not going to be writing code like this but that was just example of how you're going to be setting your EnV file or um sensitive information file whatever you want to call that and how you are going to be accessing the specific data from this EnV file right so that was it about the EnV and also how to get a data so now let's learn about how we are going to be posting a data by using our post HTTP method but unfortunately we cannot see the result of that because we have to use some sort of a tool for that so so you can use different kind of tools like insomnia or Postman or thunder Cline or something like that and throughout this course I'm going to be using a postman but now let me just show you if you like vs code and you want to use the vs code um extension so for that you can install this thunder Cline you just have to install that it's almost similar to posan which I'm about to show you so you can install insomnia or I don't know you can install a posan so I'm going to just search for Postman because I know a lot of people have used uh Postman before if you didn't that's completely okay you don't even have to know what a postman is so a postman is nothing but just a tool for testing or apis and all of that kind of stuff I mean like more than that but in this specific course we are going to be just testing the result of our API by using a postman and I don't know why we are not getting that icons I guess I just force on the dark mode and there we go so if you're using a Windows operating system so you can download it for that if you're using a Mac so you can download um I mean like you can click on this button to download that if you're using a Linux so you can click on this button right here I already download and installed there and by the way if you don't want to download and install that in your machine so you can uh also just provide your email right here and you can use it inside your browser even if you wanted to I already download and installed there right here so I'm going to be using there right here I already have these two folders which you don't have to worry about you won't have that so I'm going to just click on that and click on blank collection right here let me just zoom in a bit so you guys can see everything a bit better and I'm going to just write like uh next demos or something like that you can give any name you want and now I'm going to just click on these three dots and click on the add request right here and it's going to add that request right here so I'm going to just click on that and first of all let me just show you everything from the beginning like getting a data or a fetch data or something like that and I'm going to go ahead and let me just show you that first of all like how the postman work I'm going to go ahead and write um dummy um data API or something like that I don't know why but today my internet connection is supremely slow uh let me just copy that I'm going to just copy that and place it right here and just click on this send button and here you can see it will only gives us one product right here because we specify one product so that's why we are now getting one product with the ID and also description and also the price and also the images and all of that kind of stuff if I just remove this one from here and if I click on the send button it's going to give us a lot of data right here like product and it's going to give us I guess 100 products or something like that so this is how you're going to be fetching a data if you want to save that you just have to hold control and hit s okay so it's going to save it right here and we already given name to that so now I'm going to just create one more for posting the data so I'm going to just add request and I'm going to close this one out because we don't need them I'm going to give a name of like uh I don't know post uh random data or something like that name doesn't matter I'm going to just give that name and then what you have to keep in mind is you have to change this method from get to post right here so you just have to click on that and click on a post and it will now change it to post right here you don't want that so now let me just go ahead and create my route right here I'm going to delete that and now let me just go ahead and inside the app folder we are going to be creating first of all the API because currently we wanted to test our API so inside this API we're going to be creating a users folder and inside this users folder we are going to be creating route. JS okay so here you can see we have a users folder and inside this users folder we have this route. JS right here so that's then now the next thing which I want to do is that I'm going to use the Asing function in this case so now let me just write ASN function and I'm assuming that you guys already know what ASN function is if you don't so you can check out my JavaScript course and inside that course I have a specific section called asynchronous JavaScript anyways that's out of the course I'm going to just write post right here because in this case we are using this post method right here so here we have to specify post and post specifically means like we are posting some sort of a data to our uh server or to our client or something like that so here you can provide request and response if you wanted to but I'm not going to provide any of the request or any of the responses right here okay so what I want to do is that I'm going to just first of all write like let data and here I'm going to just write like aware because in this case we are performing the asynchronous operation so I'm going to just use like request. Json and now let's just execute there I'm going to also log that data to the console but now we also have to send some sort of response to the user like next response and here I'm going to just write like Json success or res like for res and data sent successfully or something like that and now let me just save that I'm going to open my browser right here I mean like terminal right here and here what I want to do is I'm going to just write like Local Host and let me just select them and we want to go to users and inside a users we are not going to be providing anything okay so in this case if you want to send the data so what do you have to do you just have to click on the body right here and then you have to click on the raw and then you have to select this Json right here let me just say that once again if you want to send some sort of a data to your uh backin server by using a postman so you can just click on the body first of all then it will be by default select to none so you can just click on the raw then click on the Jon I like then click on this drop down menu and select the Json right here and here you can specify any data you want okay so I'm going to just write like I don't know maybe a username would be fine and the username would be set to Alex right here now let me just click on the send button and we are getting amazing response uh okay request is not defined oh that's because here we have to specify the request my bad request and also I'm going to provide you response even though we are not using it right now but I am going to provide it right here now let me just save there and restart my server once again come on let me just restart my server once again and I'm going to use npm run back I'm npm run Dev and it will start uh running my server right here now uh let me just wait for that ready now I'm going to click on the send button and what do we get we get a response and data sent successfully right here you can give any message you want but in my case that's a message and what are we getting we are now getting this data right here which we are specifying it right here like we have a username and the username is set to Alex so that's why we are now getting this username and it is now currently set to Alex right here so which means like we are getting some sort of a data from the user so yeah that's amazing so what I want to do is that I'm going to go back first of all and let's just do a little bit of uh user validation right here so uh I'm going to get a few things from the user like uh I don't know the user email and this is destructuring by the way I am destructuring this value from this request. Json right here okay if you don't know what a destructuring is so you can watch some of the YouTube where you like what is a destruct uh I mean like specifically object destructuring and all of that and so now you want to destructure the email and also the user password right here let's suppose we are building some sort of a login page right here and we are going to be getting the email and also the password from the user okay so let's just check it out I'm going to also console log this email and also the password as well so now let me just save that and I'm going to go ahead and here I'm going to just change that from username to email in this case and also change that to like Alex at email or gmail.com and here I'm going to also specify some sort of a random password like uh I don't know uh alex12 right here I hope you can see that because everything is supremely massive and this is the data which we specified right here inside uh this Json format now let me just click on this send button one more time and data successfully sent now let me just check it out and here you can see we are now getting the email which is Alex gmail.com and we also have this alex12 as a password right here which means like we are getting a data from the user so now we can provide a labit of validation right here so I'm going to use the if statement and here I'm going to just provide if not email or uh if not password if the user did not specify the email or if the user did not specify the password so what do you want to send to the user we just want to send to the user like next. response and Json and here we can just provide like uh I don't know error and I'm going to just say like required uh required field not found or something like that and here I'm going to also provide my status right here so status will be set to 404 or not 404 400 would be fine okay like so I'm going to save this file right here so it will just uh format there for me and now let me just check this out and here you can see we have this 200 of status like uh which means like everything is a okay so now let's suppose if I didn't specify anything let's just cut that from here and now let me just click on this send button and here you can see we are now getting this required field not found and we are also getting the status of four for bad request right here which we are specifying it right here so that's cool now let me just provide one in this case like I'm going to just provide the email and I'm not going to be providing the password and now let me just click on there once again and here you can see we are still getting the required field is not found and we are also getting the status code of 404 I me like 400 not a bad request there we go but if I provide the email and also the password and if I click on them and here you can see data sent successfully and we are also getting the status code of uh 200 word here which means like everything is totally working oh you know what for the success message I'm going to just change that to something else like uh I don't know I don't know if that spelling is correct or not credentials very fine e r i f i e user successfully uh created or something like or logged logged in log come on or GED log in there we go so now let me just save that now if I provide the email and password we are going to be getting like credential verified and user successfully logged in okay so yeah so that was it about how we are going to be posting a data and we already learned about how we are going to be getting a data you just have to change that to get and you have to specify your get information right here so that's it about how we are going to be posting the data so now let's just integrate this API which we created right here with our UI so I'm going to make a few more changes right here like I'm going to also take the username as well from the request. body and I'm going to also provide the email and also you know I'm going to delete all of that code right here and now let's just try that once again so we are going to be providing I me like we are going to be first of all getting the name from the user the age from the user and also the email from the user so I'm going to just WR request. Json and we are going to be getting all of that stuff from the user so now I'm going to proide if we don't have the name or if the user did not specify the name or if the user did not specify the edge or email so what do you want to do in that case we just want to return next response and we just want to show to the user like some sort of error message and I'm going to just say like required uh field not found or something like that and then I'm going to also provide or you know what I'm going to also set the okay flag so you don't have to do that but if you want it to so feel free to provide this okay uh okay flag right here and I'm going to also provide the status code so I'm going to write like status of 400 right here now let me just save that and that's I guess it but if the user specified every single thing thing so we just want to set that to True right here okay and I'm going to also set that to status of uh 2011 create it right here like we're going to be creating a specific user based on the email I me like based on the username Edge and email right here so now we are creating a user so this is our back in API or or back in logic whatever you want to call that now I'm going to go ahead and go out from this API but inside this folder not inside the API but inside this folder app folder to be precise I'm going to create one more folder right here and I'm going to give a name of like add new user right here and inside that I'm going to create like page.js right here and here we are going to be integrating our API which we just created right here so the first thing which I'm going to do is that I'm going to write my rafc and I'm going to give a name of like add new user right here okay so now let me just save that and I'm going to go ahead and go to add new oh come on add new user right here and hit enter right here and here you can see it will now giv us like add new user right here which means like everything is okay so now we have to convert this um what we call this component to the client component because in this case we are going to be using the US St and we are going to be also providing yeah we are going to be also getting the used so that's why we have to change that to the client component right here so the next thing which we have to do is that we have to grab the use St for here from our reactjs and now inside there we are getting a few things from the user like the username Edge and email as well so we're going to have to create that right here for I mean like we have to create a state for that so I'm going to just put the name and set name because we want to get the username first of all and we want to set that to empty string and I'm going to also get the user Ed so set Ed and it will be now equals to the US and empty string and we also want to get the email and set email and it's going to be also set to empty strings right here I'm going to remove that from here and inside that we're going to be creating um I don't know I'm going to create a form should I create a form you know I'm not going to create a form I'm going to just write like input right here and for this input the value you know what the text will be I mean like the type will be text and I'm going to provide the on change Handler right here t h n g and it's going to tag the event object and then the set name here we're going to be providing e. Target do value right here t a r g yep the spelling is correct and I'm going to also provide the value and the value we're going to be providing the name which we are specifying it right here and I'm going to also provide some sort of a placeholder like I don't know please enter your name or something like that now if I sell that here you can see we are getting this input field and that's looking awful I know that's looking totally awful should I remove this globals you know let me just comment this out and save them and I guess that's it I'm like that's cool let me just disable the force that's looking for anyways we don't care about the UI so now let's just provide a logic and let's just see whether everything is working or not I'm going to duplicate that a few times like one for the name one for the edge and one for the email okay so type will be text as well you can change that to number if you want you know let's just change that to number what the hell and also let me provide instead of writing a set name I'm going to write a set Edge in this case and please enter your Edge come on please enter your Edge and this one will be also Edge right here and this one will be number uh I'm text and here we have to specify the set email right here and email here and also uh email here as well so now let me just save that so we are now getting the name Edge and also the email let me just provide a bit of breaks right here come on not here hit enter br br and hit s and there we go and finally now let me just provide one more input for the submit or you know I'm not going to be providing input uh I'm going to provide the on click right here for the on click we're going to be creating a function um uh submit Handler would be fine or you know click or you know uh add new user Handler would be fine I guess that would be fine add a new new user would be fine as a level so now let me just copy them and now let's just create our new user right here okay so here we are going to be providing all of that logic right here so we we are not going to be providing anything but it should be asynchronous function uh right here because in this case we are going to be performing the asynchronous operations so yeah now let me just con log the name and also the ede and email as well so now let me just save that and here we also have to specify the BR tag right here let me just save that and we are now getting this button is supremely a I provide some styling to the hell uh class name BG will totally black and text will be totally white save there refresh come on that's looking but now you get the idea like we have this add uh new user button right here you know what let me just uncommit this out and KN if I sell that and yeah you get it let's WR a border I'm in a hurry man please do it a bit quickly and padding all around will be set to two or something like that yep here you can see we have this button and we also have these uh things right here things yeah what the hell I'm going to click on here click here and also click here and I'm going to put the class name and margin for the left will be set to two and margin for the right will be set to four sem my file and yeah I'm going to also put margin for the top will be set to four as well that's looking cool and let's just a little bit of margins here margin for the left will be set to four yeah I guess that would be fine then so now here you can see the UI successfully done so now let's just Implement our API logic right here oh I even forgot to show you that so what I want to do is that I'm going to just restart my server once again because I want to show you every single thing so now let's just restart our server and let's just check it out right click on that go to the inspect area because currently we are working with the client component so here uh I'm going to specify first of all oh my God we got to refresh that let's just refresh that and I'm going to specify the uh name first of all the name hosan the ede will be 20 and the email will be husan gmail.com now let me just click on the add new user and here you can see we are now getting the name of hosan we are also getting the edge of 20 and we are also getting the email as well that's cool now let's just Implement our API logic right here and here let me just remove that let's just get uh or response so I'm going to use like aware and fetch first of all and what are we going to be fetching we are are going to be fetching this API right here so now let me just copy that and we are going to be pasting it right here but in next JS you don't have to specify all of that stuff right here I guess they're using axy that's why we don't have to specify that I mean like you totally can if you wanted to but we don't have to so now let me just remove that right here and here what do we have to do we have to specify uh our method right here so in this case we are providing the method of post right here because we are not getting the value so we have to specify the post method and I'm going to also provide the body and for the body we are going to be providing json. pars oh not pars but stringify and we have to convert that to I mean like we have to provide the name you also have to provide the edge and email and email as well so now let me just store the result off there in some sort of a variable so I'm going to use like count response it will be now equals to that response and now let's just convert that response to aware do um not aware dot but response. Json to the Json format and now let's just check uh resp response what the hell is wrong with that could not find response do you mean oh yeah come on copy then place it right here and there we go if the response do okay like if that's said to true so what do you want to show to the user uh we just want to alert to the user like in this case we are going to be alerting but in the real project we are going to be using toast on the react toast but we are not there yet so we are not going to be using toast right here so I'm going to just write like user successfully um created would be fine because in this case we are creating a user if that's not the case like if the response is set to uh false I mean like response. okay is set to false so let's just copy that place it right here and change the uh what do we call it change the message to like an error occurred while creating come on creating uh the new user right here so now let me just save that and I guess that would be it okay so let's just go ahead and check it out okay we are getting amazing error and I don't know why but we are getting that let's just close there and what's the error cannot assigned to a variable declare with the const yep you're totally correct so we have to change that to lead and refresh them and we are not getting any errors and that's okay and we're not even uh logging something to the console so I'm going to just U provide the name of Alex in this case and the edge will be 21 or something like that and Alex add come on Alex at gmail.com and now let me just click on the add new user and here he can oh my God an error occurred while creating a new user what's up what's the error and I spent a lot of time figuring out what's the problem and you know what's the problem let me just go ahead and show you there here we missed the event now let me just sa there and restart that once again okay come on I just forgot this one resert keyword right here and everything just went to the G anyways now let me just refresh there and I'm glad I'm glad I show you this uh solution right here because you would have faced this kind of error and you would be asking me like what the hell is wrong with you let me just put that Alex once again and 21 Alex gmail.com right here and now let me just click on the add new user and what are we getting we are now getting user successfully created word here which means like everything is a okay so now here you can see we are now sending request to the API for/ users and we are sending the post method and here or 2011 which means like your user is successfully created but we are not using any kind of uh database system right here so that's why we cannot see anything so here you can see here is our data and here is the preview code I like the preview right here so credential verified and user successfully logged in all right so that was it about how we going to be integrating the API with our UI all right so that was that about for getting the data and posting the data so I just delete that add user folder and also that API folder as well so here I'm not going to be deleting this folder because this is going to be our database so we are going to be reading the data from this database we are going to be I mean like pushing data to this database we're going to be updating there we're going to be deleting there and also filtering there so we are going to be doing a lot of stuff but before we move on first of all we have to make a setup for this project so so for this project I'm not going to be focusing like heavily on the UI so that's why I choose this material tailing CSS or material tment whatever you want to call that if you don't know about that you don't have to I also don't know nothing about this material T but yeah it provides a lot of component so you can reuse that component and there we go you would have uh your cool UI right here okay so yeah what I want to do is that I'm going to just hit control K and I want to search for installation so installation there we go and and we are not going to be using that by using a wheat so I know this website is totally white I'm going to just force that to the dark and yeah that's looking amazing let me just zoom in a bit I'm going to click on the installation oh there we go here you can see we have this next chest right here so I'm going to just click on that and what they are suggesting is that first of all we have to create our next app we already did there then we have to install this um material tailn and react so now I'm going to just copy that I'm going to open my terminal right here and I'm going to just right click on there to paste my command and hit ENT right here so while it's installing it's going to take a bit of time you can also use yarn if you wanted to you can use PN PM whatever is that supposed to mean and the next thing which you have to do is that we have to go to our taling configuration and we just have to pass these two uh line of code right here you can also provide that path if you wanted to but we're not going to be using that it's going to take a bit of time but what I want to do is I'm going to go ahead first of all I'm going to go to My Telling config file right here and I way Zoom zoomed in let's just go back from there and I'm going to just copy this line of code first of all let me just copy there I'm going to go to the top and let me just place that right here and I'm going to also wrap my every single thing by um with this with mt whatever you want to call that so let's just wrap that right here and I'm going to just close it right here as well so I want you to just take a look at that so and this is how we are going to be using material T and react you tail and all of that so now let me just see and here you can see see that successfully installed now let me just save that and there we go that was the setup for or material T CSS or material tail whatever you want to call that and it provide a lot of utilities like if you have already worked with bootstrap so you already know how to work with uh this one as well okay so we are going to be just using these component like accordion and inputs and badges cards and all of that and trust me it's not going to be huge project but I want to just make a fake user management project uh which will help you a lot so the next thing which you have to do is that we have to go ahead and create a few folders so first of all I'm going to create a folder for my API where we are going to be putting our API endpoints so we are going to be also creating one for the users and inside this users we are going to be creating our ID but before I create ID first of all let me just create a route. JS RFC oh we are not going to be writing RFC right now let me just create one more folder right here and which will be a dynamic ID folder and there we go so the first thing which I'm going to do is that I'm going to also create a page right here not page but route. JS right here the first thing which I'm going to do is that I'm going to just open this file and we are going to be doing a few things so I'm going to just first of all grab my users from that users right here like this app and we have util and also our database right here so we grab that the next thing which I want to do is that I also wanted to get my next response from the react server let's just go back and now I want to create one endpoint for fetching all of the data which we currently have inside our database so I'm going to just write like uh all users data right here and I'm going to use export and now I'm going to use a function I'm going to give a name of like Get and here we are not going to be providing any parameters so I'm going to just write cons data and it will be now set to their users and we don't have to do nothing but we just have to write this next response uh come on next respon oh my God response and here we just have to use that Json and let's just provide our data right here and I'm going to also specify the status score right here so the status score for this one will be 200 200 so now let me just save that and now let me just check it out right here inside my uh what do you call it inside my uh post oh my God inside my post man there we go I kind of forgot the name of that anyway so here you can see we have this post method right here I'm going to change that to get and now let me just remove all of that from here let me just save them and here I'm going to just click on the send button and it will give us an error because we did not run or backend right here so now let's just run them and there we go it's ready to go so I'm going to just go ahead and click on the send button and here you can see it will gives us all of that data which we currently have inside our database right here like we have Alex then we have Quagmire we have Jordan and we also have Mike Tony and meh okay so it will gives us all of their users so you know what I'm going to just create um I'm going to delete that first file let me just delete this one and I'm going to rename this one to fetch all users right here so it's going to fetch all of the users so the next thing which you have to do is that we have to get a specific user right here so I'm going to go ahead and go to the ID and inside this ID what I want to do I'm going to just grab my users once again I'm going to also get my next response from the uh react I mean like not react server but the next server and let's just write a comment like get specific uh user from or database or whatever you want to call that now let me just use export and function and here I'm going to give an name of like Get but here we are going to be doing a asynchronous operation so we have Prov as syncher keyword we're not going to be getting the request but we will need a response we want to get a response as well and now I'm going to just write con and we want to just destructure the ID from where from the a from the response. Json and not Json but prams so we are going to be just getting the ID from this uh response. prams okay you can log there if you wanted to now let me just write cons users or user rather because we're going to be getting a singular user and now I'm going to just filter through all of the users which you currently have um and I'm going to just provide um this Arrow function right here and if the U like a specific user. ID is equal to this ID which means like we are not filtering that specific user so then we have to just get that specific user right here as a response so I'm going to just write response Json and now let's just render or specific user so now let me just save there and now let's just test this out I'm going to create my uh request right here let's just change that to post and specific user right here and let's just saell that I'm going to also get a users and in this case I'm going to provide a specific ID right here so I'm going to just write like two in this case and click on a send button we are not getting anything at all I don't know why perams now let me just go ahead and check out my utl and database so we have ID of one and we also have ID of two right here but why it's not working uh let's just save them API users and we are providing two and we should be getting oh we are working with the post right here it should be a get method my bad I'm going to just click on send button and here you can see we are now getting the ID and we are getting the Quagmire right here if I search for like ID 4 user and if I click on the send button and we are now getting the mic s my file and this is how we are going to be getting a specific user by their specific ID right here okay so now let me just close my database my fake database and next I'm going to show you how to log in but we are not going to be implementing or we are not going to be integrating the UI for that okay so now let me just try the third one will be or did I label them yeah I label them as numbers this one will be two and this one will be three and I'm going to just write login and I'm going to just give you a demonstration for that but we not going to be creating a UI for this one so let me just write export and now let me just write as synus function let me write function and it should be post because we are going to be posting some sort of a data let me provide my request and also the response as well and now let me just destructure a few things like name the email and also the password as well we already learned about that but let me just do that once again a request. Json one more time and we are going to be also restructuring the specific ID so I'm going to use like aent and response. prams right here okay so we are getting an error because we forgot to include the equal to sign right here now let me just destructure a few things um so I'm going to just write const and let me just destructure the name and I'm going to rename that to the username right here because it will gives us a conflict because here you can see we now grabbing the name right here we're destructuring the name from the request Json and we are also destructuring that so so we have to change the name of this one so that we don't get any errors based on the name conflict so that's why I just write uh username right here you can give any name you want like by the you can give any name you want but the destructure name should be a name right here because we are destructuring this value and we are now renaming this specific value right here okay so just keep that in mind if you don't know about destructuring in JavaScript I'm not going to assume that from you guys because this a bit uh Advanced topic so yeah that's the I'm going to also get my password as well and now let me just rename that to your user password and it will be coming from the users and we are going to be using the find method and in this case what do I have to do let me just go back I'm going to just specify my spe specific user and I'm going to just use like if user. ID is equal to their ID just only gives us that specific user so now let me just save that and this is how it looks like right here okay let me just zoom in a bit once again and yeah here you can see it is already giving us that auto complete but the majority of time that's incorrect and I don't want to re-record my value again and again so now let me just write a check if usern name uh is equal to name and um user email is equal to come on is triple equal to uh the email and let me just use the and user password is equal to Triple equal to the specific password so what do you want to do we just want to show this result to the user so let's just return next response right here oh come on response if I can get that and now I'm going to just send this response to user result and successfully logged in baby if that's not the case so what do you want to do uh else if we want to check once again if you don't have the name or if you don't have the email or if you don't have the password as well so what do you want to show to the user we just want to show this return next come on next oh my God response. Json and let's just send this response like uh rle please fill all the come on all the input felds right here or fields and for the final stage what do you want to do we just want to write like return and next invalid user invalid credentials right here okay so now let me just save them and this is going to be our login stuff right here let me just go back so you guys can see everything a bit better so what we are doing is that first of all we are grabbing the username email and password we are also grabbing the user ID as well and then we are just performing a filter or a find method whatever you want to call there and we are checking if the user ID which we are getting right here from this specific user is equal to that ID which we are getting from the prams and we are going to be just destructuring the name the email and the password okay so we are destructuring that and we are just changing the name of them okay so then we are just checking if the username is equal to name and also the email is equal to email and password is equal to password so we just want to send that um message to a user which is like successfully logged in if that's not the case and if the user did not specify either name email or password so we just want to show to your user like please fill all the input fields and also if the if that's not the case we just want to provide like invalid user credential or invalid credential whatever you want to call that so now let me just go ahead and create a post request right here not a folder come on delete them let me just create my post request uh there we go login user would be fine and now let me just click on the post and I'm going to just get there and I'm going to go ahead and go to a specific um route right here so now let me just write four so we just want to log in the fourth person inside our database so who is the fourth person oh I'm just checking the real database let me just go ahead and check it right here so this is the third one you want to log in the mic woohoo yeah that was a lot of enthusiasm so now let me just go ahead and click on the raw click on the Json one more time and here we have to specify that specific username and email and all of that first of all we have to specify the name and the name was I'm cheating because I don't remember the people's name so the name was Mike and the next thing which you have to do is that we also have to specify the email and the email was Mike gmail.com so now let me just provide them and finally let me also provide the password as well and the password was mike1 12 or whatever you want to call that okay now let me just click on the send button and we are getting some sort of error let's just check it out oh I'm writing this code in the wrong place let me just cut all of this code from here let me just go ahead and go to this route folder right here here and now let me just place this code right here so now if I save that and now let me just go ahead and click on the send button and here you can see we now getting the result and successfully logged in right here let's suppose if I provide like a wrong credential like I don't know 444 or something like that and if I click on the send button and here you can see now gives like invalid credentials or if I just cut out like I don't know maybe a password or the email or something like that let me just cut out the password and click on the send button and it will give us like please fill out all of the input Fields right here so that's also amazing and totally working a okay so let's just remove that and let's just try to log in and here you can see like successfully loging right here so now let me just save that and that was it about how we are going to be logging in the user let me go ahead and go to a bit tricky part right here so in this one we are going to be creating the user so the fourth one will be for create or create new user rather okay so now let's just create a new user so what I want to do is that first of all I'm going to export the asynchronous operation so we're going to be using the function I'm going to give my name of like post and let's just remove that and change that to request and also response right here uh let me just grab that same data so we are going to be getting the ID the name the email and also the password from where from the aware request. not request. prams but request. Json there we go okay so we are going to be getting this data from the user and let's just check uh if the data is provided so this is going to be a bit of validation right here and I'm going to just write like if the user did not specify the name or the email or the user password so what do you want to show to the user we just want to return next response right here and let's just write a Json and for the Json we are going to be providing the result and rle will be required uh required F come on F L not fam right here and if that's not the case we are going to be just writing the status of 400 right here so now let me just save that and yeah let me just test this out so I'm going to go ahead and create a new oh not folder a new request right here and was that a get request no it's a post request so we got to go to the post and let's just go ahead and create a specific user so I'm going to go ahead and go to the user right here click on the send button and it's not going to give us anything not for now because we did not specify anything right here okay so aw request. Json and also we have to specify the ID if we don't have the ID so let's just check for there as well so now let me just save that and we should be getting some sort of error right here so we have API and users yep and we are writing this code inside API and users so we should be getting some sort of error and we are not getting any errors so that's cool maybe uh let's just save this file let me just try it one more time oh we are getting an unexpected end of Json input right here I don't know where this came from from so now let me just restart my server once again and let's just try it out once again come on um yeah everything is successfully ready now let me just click on the send button and we are not getting okay so API users route in this module syntax unexpected end of Json input and Json parts we are not even parsing anything uh yeah we are not even posing anything so where in the word is this error coming from you know what that's because I guess we are not sending any response or something like that uh because we only have one if statement right here but we're not even sending any response so that's why we are getting their errors so now I'm going to just restart this server once again and I'm going to write the rest of the code word here let me just write the else clause and now add the new user to the inmemory array right here so we are going to be like uh creating a specific user and we are going to be U pushing that specific user to or real database or fake database to be precise now let me just use like users. push and we are going to be pushing the specific user ID uh the name the email and also the password which we are already getting from this user right here okay so we're going to be pushing all of them but that's not it we are going to be also writing uh let me just write a comment like extract just a user array from the updated data right here so now let's just extract the specific user data so I'm going to just use like updated users array right here and it will be now equals to the specific users right here okay and now what I want to do let me just go back now what I want to do I'm going to just convert the update come on updated uh users array to uh Json string right here okay so I'm going to just use like cons updated data and it will be now equals to Json and now let's say stringify there and we are going to be first of all providing the updated user array and the next parameter we we are going to be specifying here for n and let's just write two right here as index now finally let's just write the two or real database file which we have right here so we are going to be putting that right here but before we getting into all of that first of all we would need some module which is a nodejs modules if you don't if you guys don't know about nodejs modules you don't have to but now let me just say like this is a node J stuff which I'm doing right now at this second okay so you can just go ahead and quickly just Google search like um njs FS module or something like that you can ask from chair GPT your best friend and here you can see FS module like as the M suggest is going to work for the file system modules and I have an entire course on this uh whatever you call it this uh not just right here where I discuss a lot of modules inside not just like a lot of them crypto HTTP and all of them so here you can see I'm just searching for the fs module we already have a lot of FS modules I'm going to go ahead and go to the top first of all and we have file system we can use the asynchronous version right here so you just have to import that first of all we are not going to be importing it by using the older way let me just click on the es6 way oh that's awful too we're not going to be using this code anyway so we are going to be importing there and we are going to be doing some stuff which I am about to show you right now so let me just get uh my FS module so FS from FS module right here okay so now here let's just push our code into a real database oh now why am I saying real database to or fake db. JS file there we go write the updated users array to a Json string right here okay so how can we go about doing that we already have our FS module right here here you can see we already grab our FS module or file system module right here and we are going to be just using a DOT method I mean like we are going to be just using using Dot and we have countless method right here okay uh which I already discussed in my course if you want to check it out so feel free to do that if you don't want to learn about nodejs you don't even have to so now let me just explain write file synchronously so here you can see we have this method which will allows us to put some content to our file synchronously so we also have like asynchronous function I mean like we also have the flavor of this function like synchronous and we also have asynchronous right here so now in this case we are going to be using the synchronous version because we want to do the instantly so first of all we are going to be providing the path where we wanted to provide that content so in this case our path will look something like this first of all we want to go to the app directory then we want to go to specifically that util directory and then inside this util directory we have this db. JS file right here okay so we are going to be pushing our content to this specific path right here come on path right here and now let me just provide that path right here so I'm going to just use like do and for slash which means like go from this file which we currently working on and you want to go to the app directory or the specific app folder right here and we want to go to the U Tails or U tail folder which we currently have right here and then specifically inside that your tail folder we want to go to this db. JS file right here which we have right here okay so now we successfully provide our path here the next thing which you want to do is that we want to provide our code right here so I'm going to just write like export cost and users and it will be now equals to let's just render or code right here which will be updated uh updated data right here and now let me just close there like so okay so this is how we are going to be putting or pushing our data and now the next thing which you have to do and the final thing which you have to do is that we are going to be also providing uh the uni code right here so in this case we are using the UTF at right here so now let me just save there let me just say there once again FS is a node module which means like file system which allows us to work with a real file system in any operating system like if whether if you are working on the Mac or on the Linux or if you're working with um uh what do we call the Windows operating just like me so it allows us to work with the file system then inside this FS module we have this right file sync method right here first of all we are going to be providing the path then we are going to be providing what we wanted to send or push to that specific file and finally we have to specify the encodings so in this case we are using the UTF eight so that's why we provide that UTF airort here that was a lot of talking okay so now let me just return that next response uh come on that next response right here and I'm going to just use the adjon method and success and in this case user successfully successfully uh created yeah user successfully created there we go so now let me just save there and this time it should work I guess if I didn't mess up of something so in this time it should work so what I want to do is that I'm going to go ahead and go to my Postman right here and I'm going to first of all provide some sort of uh what do we call it some sort of ID right here first of all so we have to specify some sort of ID and H not here come on we're not even providing okay we are providing right here that ID so now we don't have to specify ID here but instead we have to specify our ID manually inside our body then we're going to be choosing this ra right here then we are going to be choosing this jsn format right here so what are we going to be providing here we are going to be providing the ID name email and password so now let's just do that I'm going to provide the ID of uh I don't know who is the last person six is the last person so I'm going to just provide the ID of uh 7eventh right here in this case I'm going to just write seven okay and I'm going to also provide some sort of a name to it so the name uh will be equals to I don't know um keyboard or something like that you can give any name you want and then I'm going to also provide the email so the email address will be keyboard @gmail.com or something and I'm going to also provide a password so password and it's going to be equals to like uh keyboard 1 2 3 or one two would be fine so finally the moment of truth and finger cross now let me just click on this send button and here you can see user successfully created woohoo now let me just go ahead and go to my database right here and here you can see the ID is now set to S the name is keyboard we have the email and the email is now set to uh keyboard gmail.com and we also have our pencil right here so now let me just save there and boom baby boom there we go this is how we are going to be creating the user right here now let me just create a few more but before I do I'm going to have to delete a few of them because they are a lot so yeah I'm going to just create one more first of all you know what this one is a fourth one we have to specify the fifth one right here and let me just create like I don't know mouse or something like that I'm going to also create a mouse so Mouse 1 2 3 or one two would be fine I'm going to just click on a send button and here oh why it's not working we have Mouse successfully created so we should be getting we getting a mic right here you know what let's just save this file okay we shouldn't supposed to open this file let's just close there and don't save this file now let me just go ahead and check it out and here you can see you have all of their users once again so I got to remove all of them or not all of them but till this fifth guy right here so now let me just save that let me just go out from this file now let me just try adding this specific user so I'm going to just click on that and now let me just go ahead and check it out and here you can see we have two fifth ID right here so two entries of that specific user so we can change them we are going to be changing that in a few seconds by using the update method or put method in a few seconds but yeah you get the idea and so now we are totally able to successfully add user to our database right here amazing totally amazing hen you're are amazing yeah I know that I know that I am amazing just kiding yeah I am amazing um but not that much now let me just write five and update user right here so now let's just update our specific user okay so in this case oh my God I just remove that uh let me just try to get that once again and here you can see in this case we just want to like update either the ID or the name or the email address or the password so now let's just do that okay so now let me just go ahead and I'm not going to go into the specific Dynamic route I'm going to go ahead and go to the main uh route page right here which we have right here inside a user so I'm going to just double click on that and here we have to use or update the user so I'm going to use like export Asing function Asing in function and here I'm going to give a name of like put and it's going to take the the request and also the response as well and we are going to be getting the data from the users so like this one I'm going to copy that and let me just put it right here and let's just search for the user like uh find the user in the users array by ID right here okay so I'm going to just write cons user ID or index will be fine and I'm going to just use like users. find index we already have that method inside our JavaScript so let's just provide our user right here and let me just provide a user ID if that's equal to uh the ID which we are getting from the user which we have right here so what do we have to do uh we have to check or validate right here user index is triple equal to minus one so what do you want to show to a user we just want to return next response and I'm going to just use like um Json in this case and let's just provide our result and the result will be user not found okay or eror would be fine eror but you know result is fine I'm going to provide a result right here and let's just proide our status and the status will be set to 404 and the user not found so underneath that we are going to be also checking like if we if we have the name so what do you want to do we just want to get the users and we want to get a specific user index which we already getting right here and we want to get the name and we want to just reset the specific name right here if the user provide a new name so we just want to change the existing Name by using that newly added name right here okay so I'm going to just uh duplicate there three times right here uh let me just change that to email and I'm going to also change this one to email as well and we got to also change this one to email to and also change you know I'm going to just select this one hit control D and change all of them to password as well okay so that's them so now let's just update all of that so I'm going to just copy this code right here so let's just copy all of that code okay I'm going to copy that and you're going to see the result of there in a few seconds now let me just save that go back and this is how first of all we are going to be copying that then we are going to be wording it right here yep totally correct and we are going to be also providing that UIL and also that same one and everything is successful but here we have to just write updated right here come on updated right here so now let me just save there I'm going to save this file now let me just go ahead first of all let me just change the name of that to uh create new user and here we are going to be also updating the user so now let me just use like uh add request right here and update new user or update user would be fine right here update existing user or whatever you want to call that so I'm going to just change that to put and here we have to specify that specific user right here okay so yeah let's suppose if you want to change this specific user like uh I don't know uh we want to change you know let's just delete this user right here come on let me just delete that if you want to change this first user right here instead of providing in the Alex mer name I just want to provide the Alex and also instead of providing the Alex meren as a email address I'm going to just change that to Alex and also I'm going to also change the password to Alex as well so now I'm going to just first of all provide the um not here what the hell am I doing okay here I'm going to just click on the body let me click on the raw click on the Json and here we just have to use first of all one first of all we have to provide the ID so the ID in this case is going to be equals to one right here in the string and I'm going to also provide the name so the name will be equals to Alex in this case we just want to change the name to Alex and we also want to change the email just Alex gmail.com okay and I'm going to also change the password come on PS W Rd and password will be also just alex12 or something like that so currently we have this data right here so I want you to just keep that in mind and now let me just click on this send button right here and user successfully updated and here you can see we have the ID of one we have the Alex just Alex not Alex meren and we also have the what do we call it the oh come on you also have the email to like Alex gmail.com and we also have the password of alex12 right here so now let me just save there and it will just form there for me right here cool so now we are able to successfully add the user update the user read the user or get all of the users right here uh by using fetch all users we can also to fetch a specific user we can log in but we're not going to be implementing that in a real example but we can also create a new user we can update a specific user and all of that finally now let's just learn about how we are going to be deleting a specific user okay and what I want to do is that I'm going to go ahead and go to this specific Dynamic routes and underneath this login right here we are going to be just writing deleting a user so this one was six one so delete user right here let me just zoom in a bit so you guys can see everything a bit better I'm going to use export an asynchronous function I'm going to give a name of like delete okay so come on not in upper case I mean like not in lower case but in uppercase request and response and inside there we're going to be first of all getting the user ID and we are going to be using a and response. per right here and I'm going to also provide my first of all let me just write a comment like find the index of the user to delete the or to delete in the user array right here okay so now let me just write cons user index and it will be now equals to the user come on users. find index and in this case we are going to be also specifying uh the user right here if the user. ID is equal to that specific ID so we just want to delete that specific user so first of all user index is equal to minus1 so let's just provide or validation like next response. Json come on dojon and let's just provide a result and the result will be user not found right here and I'm going to also specify the stratus of 44 oh yeah 44 page not found would be fine or user not found in this case and now finally come on if I can write a comment uh remove uh the user from the users array right here so now let me just write users. spice and here we have to specify the user index and one okay so then then and finally let's just up update the users info you know what let's just cut that from here I'm going to go ahead and copy this code once again so I'm going to just copy all of that code and let me just place it right here I'm going to go back so you guys can see everything a bit better so we are going to be just getting the updated array from all of the users we going to be also getting the updated data we're going to be stringifying there then we are providing there what we call it um come on I forget the name of that that path and finally I'm going to just write like uh user successfully deleted would be fine okay so now let me just save them and I'm going to go ahead and create a new uh request right here I'm going to give a name of like delete ah delete user right here let me just change there to delete I'm going to go ahead and delete a specific user in this case so I'm going to just specify like one uh I want to delete that first user so now let me just grab them I want to delete this first Alex user so I'm going to just write one and click on a send button and let's just wait for it and we are getting some sort of error right here and what's up uh FS is not defined of course FS is not defined so let's just go ahead and Define that FS right here baby I'm going to just write import FS from my file system right here let's just uh you know what we don't have to restart the server so now let me just click on the send button and user successfully deleted and now let's just check out our database and voila the user is successfully deleted and we have the ID of two ID of three four and also the 51 right here so the first user is successfully deleted let's suppose if I also want to delete this third user right here so I'm going to just specify the user ID and click on the send button and here you can see user successfully deleted and here you can see we just have only three users right here now let me just save that and that was it about for the back end of all of their users but that's not it okay we are going to be also implementing all of their users functionality or we are going to be also integrating that for the front end as well so now let's just create a front end for all of that so the first thing which I want to do is that I'm going to restart my server once again and now let's get into the front and baby so I'm going to just uh collapse this one collapse this one as well and I'm going to create a separate folder give a name of like users right here and inside that we're going to be creating page. jsx because in this case we're going to be using the GSX right here and now let me just give a name of like users come on users and yeah that's it so I'm going to also pour a little bit of classes to it so the class name will be first of all flex and flex will be set to column justify will be set to Center and also the items will be set to Center and margin for the top I'm going to give him like 10 10 would be fine okay so now let me just save them save this file as well and now let me just go ahead and go to my browser I'm going to write a users right here in this case and here you can see we are now getting our users right here amazing okay so now let me just go ahead and go to the rout and I'm going to create my components components folder right here and here we're going to be creating a lot of components like accordian UI uh. jsx right here and I'm going to use like fce and accordian UI is amazing I'm going to just go ahead and grab that right here so I'm going to use like con accordian UI let me just grab that copy that there remove their users and inside there we are going to be calling it like so now let me just save there and here you can see we are now getting a cordian UI right here totally amazing so the first thing which you have to do is that we have to grab a few things so I'm going to just make it like a use client for um client component and I'm going to also get my used stat word here from my reactjs and I'm going to also get a few things from the what do we call it from this Library which we already installed right here uh yeah material uh tment right here so we going to be grabbing a few things so I'm going to just use like import and here we want to import a few things from where from Material uh tman CSS or tmin react right here okay so I'm going to just write accordion first of all and I'm going to also get uh accordion come on a RDO and header if we have that we are going to be also getting the accordian body right here basically what we are doing is that we are just creating our accordian uh component and inside that accordian we are going to be just placing a few more of our own Uh custom components which we're going to be creating in a few seconds and now let me just create my open and also the set open right here this is going to be for our accordian so now let me just provide one by default and here I'm going to also create a function for that so cons handle open and it will be now equals to first of all let's ISRO a value uh as our aror function right here and I'm going to just write a set open and here we just have to specify if open is triple to the value so what do you want to do we just want to we just want to set that to zero if that's not the case we just want to get a specific value right here okay so that's then now let me just use my all of accordian so let me just go back and here inside the accordian UI uh what I'm going to do is that I'm going to just rename that uh to section first of all let me provide my class name of withth will be set to 40 rims right here okay and now here I'm going to just use my accordian right here and let's just close them and here I'm going to also provide the open which we already provide right there and here the open uh is equal to or triple equal to one so what do you want to do in that case we just want to provide the accordian header right here so Rd in header and now let me just close that right here and I'm going to also provide the on click and when somebody clicks on that so we just want to handle the option not option but handle uh open right here and we are going to be specify one to it so all users first of all we are going to be rendering all of the users right here and now here we are going to be providing the accordian body so accordian body right here and now let me just close that and for the accordian body uh we are going to be providing our uh come on all uh users right here okay so now let me just save that and here you can see we are getting this accordian uh component right here if I click on there it's going to open this all user if I click on there once again so it's going of disappeared which means like everything is a okay so here instead of writing the all users we are going to be creating a separate component and we are going to be rendering that component right here so now let me just do that I'm going to go ahead and write all users or yeah all users are GSX right here and this is going to be also the client component so I'm going to use like use client because we are going to need a few things like um use effect and all of that use effect and we're going to also need the use St as well so now let me just grab a few things from my ton CSS material ton CSS whatever you want to call that from where from my material tment react okay so now let me just grab my list and list item also we are going to be grabbing the card as well okay so that's then now let me just use the rafc and here I'm going to give a name of like that that's amazing now let me just save there and instead of writing the all users uh we are going to be first of all fetching the users and then we are going to be rendering that users right here so let's just go ahead and create my users or yeah users would be fine and set users and it's going to be equal to the use St right here and we just have to specify empty string right here now the next thing which you have to do let me just go back is that we have to use effect right here I mean like use the use effect right here and inside that we're going to be fetching a data so I'm going to use like fetch all users come on fetch all users and it's going to be equals to asynch function because we are doing an asynch operation inside there first of all let me just get my response and we are going to be getting there by using this method word here I'm not going to be providing the entire as they are suggesting so I'm going to just use like API and users right here and also let me just get like cons users or users in and it's going to be equals to event and response not Json word here and now let's just execute that the next thing which I want to do is that I'm going to just write a set users set users like so and we are going to be just providing the user information which which we are getting and we are going to be getting a specific user data right here and finally now let's just copy that and place it right here and execute them it's going to give us all of that users data right here so now let's just render that you can log that if you wanted to but I but I already show you that so I guess there is no point of logging there out so anyways now let me just use that right here okay so we have our div and inside our div uh we are going to be first of all checking if we have the users then what do we have to do we just have to iterate over through all of that users by using the map method right here okay so I'm going to just write a user in this case and now just itate over through all of that and I'm going to just render the card and let's just close that here I'm going to also specify the user ID right here and for the class name we are going to be providing the margin for the bottom of four and inside there we are going to be just rendering the list which we are already getting right here right come on list there we go and yeah now inside there we're going to be also rendering the list item list item and now let's just close there and here we just have to write a user do name right here so now if I save there and here we are getting all of the users because we did not reuse this component right here inside this accordion so now let me just use that right here I'm going to remove that all of the users and now let me just uh use that right here I'm going to remove that s and hit enter okay so it will just Auto Import it right here for me I'm going to just save this file and wait for it and here you can see it's going to give us that Quagmire mik and also the Tony because we just have only these three users right here inside our database let me just go ahead and go to my database where in okay there we go so here you can see we have craigmire we have Mike and also the Tony so that's why we are getting these three users right here so the first component is done now it's time to create another component so I'm going to have to duplicate that right here okay so I'm going to just change that to two and for the label I'm going to write like search uh search uh for specific pick user right here and I'm going to just comment this out because we don't want to show anything not for now now let me just create a search for all of the users component so I'm going to go ahead and go to the components folder and I'm going to just write like uh I don't know SP p c i f user. jsx right here and now let me just use my rafc specific user component that's cool but not toally so now let me just use the use client component and I'm going to get a few things uh for of all from my material T CSS or whatever you want to call that so I'm going to go ahead and go to material T and now I'm going to get my button from there we are going to be also getting the card we are going to be also getting the input list and also the list items as well or item singular if I can pronounce it today so now let me just import the use stand from the react G and that's it baby we just need all of them so now first of all let's just create our St for the user ID so I'm going to just write user ID and set user ID right here and it's going to be equals to the used stand which we are already grabbing now let me just get the user data as well and set user data there we and it's going to be also equals to us and let's just provide or you know I'm going to set that to null by default now the next thing which I want to do is I want to fetch some sort of a data so fetch user data right here and it's going to be equal to asynchronous function because we want to fit some sort of a data so I'm going to use like response uh I really like to just hit Tab and auto complete that but then a lot of people is going to be asking me like hoseen you are cheating you are not writing the real code and I don't like that here I'm going to use the users and in this case we are going to be rendering the dynamic ID why is that because here let me just show you that for a specific user what are we doing we are providing some sort of a dynamic ID and based on that ID we are searching a specific user so if I just click on that and it's going to give us the mic right here okay so here we are providing their Dynamic ID so we also have to specify their Dynamic ID right here and by the way that was the only reason I created this state right here okay so that's that now let me just check ah that was a lot of talking man now let me just check if response. okay and are we providing a response in this one come on response are we providing a response let me just go ahead and go to the API and let's just check for a specific user so let me all o provide my response right here so let me just use like uh I don't know resp or not response okay would be fine so okay will be set to true in this case yeah so now let me just save then let's just try that out once again and here you can see we are getting this okay of true right here okay so yeah oh you know what we don't even have to do that because we are going to be getting that response I like that okay from that response right here you know I'm going to just leave it right here just in case if I need this so I'm going to use that if I don't so you don't have to use that anyway so that's then now let me just write conr and let me use a response. Json right here we are going to be getting the data and then we have to just set the data to the user data right here so we are going to be using like user uh I mean like response. user right here and if that's not the case we just want to like con log and error fetching or fetching user data right here okay and then set user data and we are going to be providing null to it okay so that's that and we are now successfully done with this user uh fetching data or fetch user data right here so now inside that we just have to use that right here so I'm going to just sare a d with the class of FX and inside there we're going to be also creating a d with a class of WID 72 right here and inside there we're going to be also creating a one input but we are not going to be just using the HTML input instead we are going to be using the talin uh tment or material tment oh come on your material tment uh input right here okay today I can't even speak let me just provide a label for them enter user ID right here and I'm going to just show you what's the point of providing a label right here in a few seconds it's going to give us a bit of smooth animation and yeah that's it and I'm going to also part the value of user ID right here and let's just provide on change event handler and let's just provide or event object and inside that we're going to be using the set user um set user ID right here and let's just provide e. target. value right here let me just go back and save there and this is how currently things looks like but underneath there we are going to be using the material T um Button as well and I'm going to just say like fetch user right here and here let's just provide uh the on click event hander on there on click come on on event handler on there and here we have to specify the fetch user data right here so we would be able to get some sort of a data from this oh because we are not providing there anyway so we are going to do that in a few seconds but first of all let me just render some content so underneath this div what do we have to do we have to check if we have the users data so then you what do we want to do we just want to get like or we want to iterate over through all of the users so I'm going to use like users uh or user data rather and I'm going to itate over through all of their users so I'm going to just provide D for the data and now inside there we are going to be using our react fragments uh just remove all of the conflicts and also I'm going to proide my card right here and close that and the card will be coming from you guessed it the card will be coming from the material uh t t material sorry sorry I can't even pronounce the name of that and margin for the top will be set to five frame not R but five and I'm going to also render the list and here we have to render the list item right here for the first list item we are going to be rendering Dynamic ID so I'm going to just use like D do ID right here so now let me just save there oh by the way we also have to provide the else class for orary operator okay so I'm going to just provide a paragraph and we're not going to be providing a loading but let me just put a class name uh of margin for the top will be set to two and also you know there a search for a specific user or something like that so now let me just save there and now I'm going to just copy the name of this user I mean like specific user component and I'm going to just delete this level from here and now let me just use the right here and close that let's just remove that R and hit enter so it will automatically uh import it right here so if I click on there it's going to give us some sort of message are we doing something wrong let me just try that one more time oh there we go so we are now getting this Quagmire let's just click oh my God are we not providing the I just realized that I made a mistake I'm going to go ahead and cut that from here let's just remove that what the hell and I'm going to create accordian underneath that so let's just create that accordion close that and put that right here and I'm going to also copy this open right here let's just place it here and I'm going to use two save my file and now it should work so let me just refresh there and here you can see we have all of the users so if I click on that and now if I click on this one it's going to give us thir fetch user right here and that's not the way I wanted it to be uh let me just go ahead and check this out what's up let me just cut all of that and underneath this div let me just place it right here and if I save that and I hope it's going to work let's just refresh that and if I can check that in the word we are getting this empty space right here I'm going to just try to provide something anyway so like fourth user if I click on the fetch user so we are are getting that specific user ID right here but I don't like that you know I'm going to just push this at the bottom now if I sa that oh there we go that's now looking better right here if I right click on that and click on the disable Force disable Force yeah so that's looking amazing too so I'm going to also provide a little bit of classes to it so class name margin for the left will be set to four let's just right click on that and force dark page right here so we are currently getting the user ID right here but now let's just r all of that other stuff I'm going to just duplicate that a few times the first one will be for the name and I'm going to just get the name right here and I'm going to also get the user Edge right here as well so now let me just put the user Edge and also I'm going to provide the email as well so let's just provide the user email right here and I guess that's going to be it or you know what I'm going to also render the user password because we don't care because this is just a fake user management so I'm going to just write like like uh password to and now let me just cut that from here Sam my file and here you can see we are now getting the user ID uh the username Edge email and password if I search for the first one how many people do we have inside our database right here okay so we have the ID of 24 let's suppose if I want to get the specific ID of the second user so now let me just search for there and here you can see we're now getting the Glen Quagmire and also the edge email and also the password as well okay if I click on that that will disappear and there we go so yeah that's done too and the next thing which I want to do is that I'm going to just duplicate this entire cording right here and put a space there here I'm going to just change there to three both of them to be three this one to three and also this one to three and now it's time to create a user so I'm going to write like create new user right here baby and now let's just comment this line out s file and here it's going to give us create a new user right here if I click on that it's going to happen but now let's just Implement that functionality for creating a user so I'm going to just go ahead and go to components create user dot come on create user. jsx right here and this one is going to be a long one so I'm going to just WR like a user client uh not user but use client and here I'm going to just get a few things from my material tmin right here okay so I'm going to just get my button I'm going to also get the input field and let's just get the use St right here as well from the react and I'm going to use the RFC and that's cool I'm going to provide a St for a few things like uh ID first of all set ID and it's going to be equals to the used T and here we have to specify empty string right here let's just duplicate that a few times I'm going to change that to the name and also the set name and here we also have to change that to the email and sent email and also so let's just change this one to the password as well and this one is going to be equal to the set password come on password and there we go so that's that now the next thing which you want to do is that um you want to render some content first of all so I'm going to just remove that and here you can see I can just hit Tab and it's going to auto complete it for me but I'm not going to do that let's just provide div inside this div we going to be creating a form let's just remove that action from there and I'm going to just provide not this input but my real input field right here I'm going to provide a label and the label will be just equal to ID in this case remove them and I'm going to just provide uh a few more things like uh I don't know the type will be set to text and I'm going to also specify the placeholder of ID right here and the value I'm going to specify the ID or yeah ID would be fine and on chain come on the on change event handler it's going to take like event first of all and then set ID uh and here we have to specify the E come on t r g t. value right here let me just save them I'm going to duplicate there a few times so first of all for the ID then for the name email and also for the password so we have that ID then name email password as well so now let's just change that so I'm going to just select that and change that to the name right here first of all I'm going to also select this one and change that to the name as well and also select this one and set name there we go let me also select that and change that to the email and in this case I'm going to also provide the email in this case and also the set email as well and the final one will be for the password so I'm going to write password and here we have to just write password copy that or you know what not going to copy that we have to just write a set password manually okay underneath this input fields we are going to be creating a button so now let me just create a button and and I'm going to provide a few classes to it so like uh class for the margin top will be set to two and here I'm going to also specify the type of submit right here because we are going to be submitting our form so here we just have to write a submit button and now if you save there nothing's going to happen because we have to use this component I'm going to go ahead and copy them and here we have to just use it right here inside um what do we call inside according UI right here so now let me just place that right here and just remove that R and hereit enter right here and now here you can see we are now getting the ID we are getting the name email and also the password and also this submit button right here currently if I click on that it's going to just refresh my browser and nothing else going to happen so now let's just provide or come on or form submit on there okay so here is our form and now let me just provide my handle submit on there so handle submit on submit handle submit there we go now let me just copy there and create my handle submit baby call handle submit is going to be equals to the asynchronous function async function and here we have to specify the event object and inside there we're going to be preventing the def come on prevent default right here so we're going to be preventing the default behavior and now let me just choose if you don't specify the ID or if you don't have the name or if you don't have the email or if you don't have the password as well so what do you want to show to the user we just want to alert to the user if you are using a react host let me just show you there react toast or toasttify so you can just install there and use the right away if you wanted to but in my case I'm going to use that in the next project not in this one so you just have to install that and provide this uh container right here and this one and wrap that container right here inside a layout I'm going to show you that as well a bit later but for now I guess alert would do it so I'm going to write like please fill all the input Fields F LS yep and we just have to return so that the user did not specify anything wrong okay now underneath them we are going to be also using our try and catch blocks and for the catch we're going to be alerting the error if you got some and let's just return that and for the tri block what do you want to do we just want to get the response response we are going to be getting from this specific API in users for here and the method which we are going to be using the method was uh posst right here and let me also provide my headers and for the haors we are going to be providing the content type and it's going to be equals to uh come on the application for/ Json and if you guys prefer to use exus it's a great Library if you wanted to use that so feel free to use that I did not use that in this course because I know a lot of people will not be aware of the XS Library so yeah or maybe not feeling comfortable enough to work with the XS Library so that's why I didn't use um come on I didn't use that xus library right here so now let me just specify the ID the come on the name the email and also the password as well so yeah that's then now underneath this response what do you want to do we just want to check if the response is okay so what do you want to do we just want to alert to the user like user successfully created there we go let me make the uppercase like so and if that's not the case so what you want to do uh we just want to alert like come on alert and something went wrong and a sad face right here and we are going to be also returning them and finally we already write a cat start so let's just go back so you guys can see all of the code and this is how currently things looks like I guess I don't have to repeat myself to explain all of the code but yeah this is all of the code now let me just go ahead and refresh this browser right here I'm going to go ahead and create a specific user so how many users I currently have let me just check we have three users so we have two let's just create the first user so the first user will be uh husan myself I'm going to proide husan and husan at gmail.com right here and h12 uh I'm going to also have to change there to password as well because we don't want to show text to user password or password to user so now let's just save there and now I'm going to right click on that go to the inspect element then I'm going to click on the network panel and come on network panel right here okay baby we are providing a lot of users right here uh I guess we didn't specify the dependency so now let me just close that uh let me just go ahead and provide a dependency array right here where in the world is there I'm going to go ahead and go to specific user so we are using the fetch not in this one in the all user I guess here we have to specify the dependency array of uh just empty array behind so now if I just refresh that and thank God it's not giving us a lot of users again and again now let me let me just go ahead and go to the create new user and create a new user so I'm going to just give a name of like one or ID of one and let's just zoom in so you got you know what that's it I'm not going to zoom in so the name is hosan and hosan at gmail.com hen one2 would be fine if I click on submit button and here you can see user successfully created and click on okay and here you can see we are providing the payload of everything it requires right here that's cool but now we have to double check whether the user is created or not and here you can see the user is indeed created right here so we have the idea of one we have the name of hoseen let me just check the inside my browser uh I'm going to provide the ID of one right here and now let me just pitch the user and here you can see the name and we also have to provide the edge uh if you want to provide the edge feel free to do that but in my case I just forgot to do that that's just a bug yeah you can fix that I know you can so yeah we don't have to like fix that again and again so yeah this is how we are going to be creating a user finally or not finally we got to also uh update a specific user update a specific user so I'm going to just duplicate that and I'm going to change that to four let me just zoom in a bit I'm going to also change this one to four and update user right here and I'm going to also just comment this line out sell my file and I'm going to go ahead and create a separate component for them so update user. jsx so what I want to do is that first of all I'm going to use the use client part here and I'm going to get a few things like import uh the button and also the input field from where from my tailing CSS yeah and import the use St part here and now let me just use my RFC baby and here what do you have to do uh we just have to create a few States so you know what I'm going to go ahead and grab my used it right here so now let me just copy all of that and place it right here because I don't want to waste more of your time and I guess that's going to be it inside the GSX first of all let me just remove that and I'm going to create a form once again or you know what I don't want to uh recreate that form once again so now let me just go ahead and copy this entire form okay so I'm going to go ahead and copy this entire form and let's just place it right here so we need first of all the user ID then we need the name we also need the email we also need the password as well and finally we have to just write update further so update user right here let me just go back sve my file and here you can see that because we did not use this component anywhere okay so instead of writing a handle submit you know what I can change that to update submit but that would be awful I guess handle submit is totally okay so I'm going to just create that handle submit for here so cons handle submit we are going to be doing that the as synness operation so let's just use the event prevent default and execute that right here let's just check if the user did not specify the ID so what do you want to do we just want to write alert and I'm going to just use like please provide I user ID or something like that uh yeah I guess that would be it and I'm going to just also return right here okay and also uh let me just get the requested ID so cons requested requested ID or data requested data would be fine and it's going to be equals to a specific ID right here so we don't want to specify anything else rather than just um requested ID right here so now let me just check if the user if you have the name so what you want to do you just want to get the requested ID or requested data and we want to get a specific name and we want to just change that to name right here so now let me just duplicate that a few times like we have a name then we have a email then we have a password right here so now let me just select that and we're going to be changing there to email and I'm going to also select both of them like all of them and change that to password as well now underneath this F statements we are going to be using a try and catch blocks for the catch blocks we are going to just console loging or even alerting the error okay and also for the tri block what you want to do we just want to get the response and a fetch that specific API users uh and we want to provide the post method okay so I'm going to use the not a post but put method yep AI is totally correct so let me just provide a headers and in this case we are going to also providing the content type and it's going to be equals to application for/ Json right here okay and yeah finally let's just provide for the body right here so I'm going to provide a comma and body and for the body yep exactly we want to provide uh Json and string ify and here we want to just uh provide a request data right which we are already grabbing Right Here and Now underneath this response what do you want to do we just want to check if response is okay so what do you want to do we just want to write um alert and user information updated s come on successfully or F would be fine like that and I'm going to also create a function in a few second which will be clear form right here okay and now I'm going to just use the L class for the else class we just want to get the data and the data will be equals to aent and responsejson and here we just have to write like alert either data. result or we have to use like uh something come on something went wrong while updating come on wrong while updating user information there we go okay so yeah that's it I'm going to also create this clear clear form uh function right here so underneath this function let's just create that clear form function cons clear form is going to be equals to this function and yeah we just have to do all of that so set set ID is set to empty string and also set name email and password and all of them will be set to uh I mean like empty strings right here so now let me just save them if I click on that nothing's going to happen so now let me just go ahead go to the top let me just copy the update user right here and let me just go to the cordan UI remove them and inside that we're going to be using our accordion or not accordion but our update user right here now let me just save that and refresh and here let me just click on that let's suppose if you want to like update a specific user so now let me just go ahead and go to my data I want to update uh this quig m right here so I'm going to just specify the ID of two and glin glin quickmire I guess that's the name of that guy one of my favorite characters so Quagmire at gmail do.com right here let's just change that lower case and I'm going to also provide this qum right here okay now let me just click on update user and user information successfully updated click on okay and now here you can see all of their input field is now set to empty string and now here you can see we now getting the Glen qumar and everything is successfully working right here that was it about for updating the user now let me just create one for delete the user I'm going to go ahead and provide five right here so let's just select the and provide five and delete uh user right here and this is going to be the final one and I'm going to also write delete uh user right here which we are going to be creating in a few seconds uh I'm going to leave it the way it is so yeah or you know let's just come this line our server file now let me just create a separate component for them delete come on delete user. jsx and now I'm going to use First of all the use client and now I'm going to import a few things like button uh let me just grab that manually and I'm going to also get the input field from where from my material tell in CSS I'm going to import the use stand and yep that's it let's just use the RFC and delete the user and that's cool but the next thing which you want to do is that you want to get the ID I mean like you want to set the ID and also set ID right here as the use tent and you want to provide an empty string right here and that's it now let me just provide a little bit of GSX right here so first of all I'm going to go ahead and create a form and let's just remove that and I'm going to provide my input field remove that like so for the label we are going to be just writing label of user ID or something like that and I'm going to also provide a type of totally text word and also for the placeholder we are going to be just writing like user ID right here and value will be set to totally ID and I'm going to also provide the own change CH Handler so on change Handler we are going to be providing the event object and set ID and here we just have to specify the uh event. target. value right here so now if I save them that's it okay so now underneath this input field what do you want to do we just want to create a button and we also want to provide label of classes to it so margin for the top will be set to two and the type will be set to totally submit okay so for the label we are going to be just writing like delete uh user right here so now let me just save that and I'm going to be also creating a function right here so on submit whenever we submit this form so we just want to create the handle uh submit function right here so now let me just copy that and here I'm going to just write cons oh my God what the hell did I do uh let's just remove the cons handle submit and we are going to be using the as synness a come on async here we have to specify the event object and event preent default and now underneath this event prevent default we are going to be just SC we are going to be just checking if we did not provide any ID so what do you want to do we just want to alert to the user like please provide a user ID to delete the user right here okay and I'm going to also return underneath this uh validation we are going to be also checking for the TR catch blocks and here for the catch block we are going to be using uh alert of error right here and for the try block we are going to be first of all getting the response and it will be now equals to AIT and Patch data and we're going to be just writing like API users and here we are going to be rendering our ID dynamically so we have to specify their ID dynamically right here so I'm going going to just write ID and inside that we are going to be using the method come on what the hell am I doing ah let's just go back and inside that we are going to be using the method of totally delete there we go and I'm going to also you know I'm not going to provide any headers what the hell okay and now let's just check for the API response so if the the response is okay so what do you want to show to the user we just want to alert to the user like uh I don't know user successfully deleted right here and I'm going to also clear out the form clear form and execute them and for the S block what you want to do we just want to create a data and aent response. Json and alert just or you know either data do result or we just want to write like something uh went wrong while uh deleting the user right here okay and now let me also create my let me just copy that from here and put it underneath this function right here now let me just save them and let's suppose if you want to delete a specific user like uh first of all let's just use that right here come on let me just copy that I'm going to go ahead and go to my accordion component and remove this text right here put that uh delete user right here and I'm going to close that for my user delete user so now let me just save that and here you can see we have a user ID and I forgot to remove uh that colon right here there now let's just save that and that's looking cool but let's suppose if you want to delete a specific user like I don't know maybe you want to delete hosen right here so I'm going to just specify one and click on delete user and here you can see user successfully deleted if I click on okay and set name is is not defined set name is not defined what the hell are you talking about the user is successfully deleted but set name is not defined what the hell oh that's because we are providing a set name right here and also the email we don't even have to provide that so I'm going to just remove that right here we don't even have to create this function let's just copy that and put it right here and let me just remove that from here and I guess now it will work but now let's just remove yet another person uh like four mic would be F so I'm going to just remove that mic let's just provide four click on delete user click on okay and I don't know what that was but yeah the user is successfully deleted right here so we have ID of um two uh Glen Quagmire and we also have this Tony right here so now let me just saell there and there we go there was a lot of talking and a lot of stuff so first of all we are fetching all of the users from our database we are also going to fetch a specific user from our database we can also create a user we can also update a user and we can also delete a specific user and that was it baby now next we are going to be creating a big project with a real word database mongodb and yeah that's going to be a lot of fun so see you in the next project all righty so now let's get into the final part of this course which will be an next.js word here so this is going to be the final part of this project and we are going to be creating a lot more projects later but not in this specific video but in this specific playlist right here okay so what in the word is next.js as the name suggest that will allows us to provide authentication for nexs right here okay so I'm going to just click on getting started right here and what they're suggesting is that first of all let me just make that a bit bigger first of all we have to install this next o inside our project and then we have to create this specific uh fold like o and then we have to provide the catch on route of NEX .js and this is the older way so we are going to have to click on the guide and here you can see we have to create the next off folder and inside that we're going to be creating either the route. TS in our case we're going to be using the route. JS in this case right here okay so it provides a lot of functionalities right here which we are not going to be exploring I mean like if you want me to make a video on that so I can totally do that but now in this specific video we're not going to be using any of them but what I want to do is that I'm going to go ahead and go to the credentials so where in the world is credential now let me just search for that c r d okay so here you can see we have these credentials right here I'm going to click on that and we are going to be just using this specific credential provider right here okay so you can learn more about this so the credential provider allow you to handle the sign in with the arbitrary credentials right here such as the username and password domain or two Factor authentication or Hardware devices like uh ubq or something like that so you can learn more about that if you wanted to but basically what we're going to be is that we're going to be just creating this p word here okay so enough talking and now let's get into it so I'm going to just click on the getting started button and now I'm going to just click on that but before I do I'm going to have to create a separate project folder right here because I want to show you everything from scratch so now let me just make that a bit bigger so you guys can see everything a bit better so now I'm currently inside a desktop so I'm going to just write npx create let me just make that a bit bigger create Das next- app right here here at latest yep I'm going to just provide y to prede and it's going to install a few dependencies right here so what will be the name of my project I'm going to give a name up like next off or something like that I'm going to hit enter we not going to be using typescript we are going to be using ES L we going to be also using the TN CSS as well we are not going to be using the SRC but we will use the app directory and we're not going to be providing any aliases I'm going to just set that to no Hit N here and it's going to start installing all of their dependencies for for my next off project all right so next is successfully installed so the next thing which you have to do is that we have to install a few more packages which will help us build this project so I'm going to first of all go ahead and go to the next and off I'm going to hit Tab and it will auto complete it for me and I'm going to use first of all npmi to install a few dependencies like bcrypt come on BC y pt. JS not JS but just BCP mongus and also um the next off as well and we're going to be also working with the react uh toasttify t s t FY I'm going to hit enter to install all of these dependencies into this project as well I don't know why it look like this but all of the dependencies are now successfully install and I'm going to just WR code and Dot so it will automatically open my vs code right here let's just remove them and now let's just start working with our project right here okay let me just zoom in a bit and I'm going to just remove a few things so you know what before removing a few things I'm going to go ahead and go to come on come on if you guys don't know about what in the world is mongod and Mongoose so you can check out my course on there and you will learn every single thing about mongodb and and trust me it's not that much difficult thing to learn I'm going to create my EnV file or specifically env. local right here okay and I'm going to first of all write URI and it's going to be equal to this URI right here instead of writing this test I'm going to just set to H DB right here I already have a few databases right here so I'm going to go ahead and go to this mongod DB and this is the extension which I'm using right here inside a vs code if you don't want to use that you can install the I don't know mongodb some I don't know there are a lot of tools to work in mongodb right here so right now I just forgot the name of them so now let me just remove this hen database right here so I'm going to just write hen DB to drop this database right here and there we go and also the huzen shop will be also dropped so I'm going to just write like then shop and hit enter so that database is also gone right here okay so everything is successfully working the next thing which I want to do is that I'm going to also create one next uh o and URL right here and next o URL will be equals to http and then Local Host and and Local Host will be set to 3,000 right here okay so this one is important and also the next off and secret will be also important which we are going to be also using so I'm going to just WR like some uh r random secret key right here it doesn't matter what you put right here but you have to provide something right there so now let me just save that and that's it now the next thing which you have to do is that we have to create a separate folder I'm going to give a name of like config and inside that we're going to be creating our database setup so I'm going to just create db. JS file right here so the first thing which I want to do is I'm going to just grab my mongus come on mongus from mongus and now let me just write const connect DB and it's going to be equal to the asynchronous function and here we just have to write this function right here and we just have to use our try and catch blocks for the catch block we're going to be using like console. error and we just have to specify like uh I don't know some error or something like that and I'm going to also render my error do message right here from that specific error and I'm going to also use process. not EnV but process. exit and now let me just provide one so it will exit out all of the things and now I'm going to use my AED and here we just have to use mongus do connect method and here here we just have to use process. EnV and mongu URI right here and when that successfully connect so we are going to have to just write like connected mongu DB right here okay so now let me just save that and finally now let me just export this so I'm going to use export default uh default connect DB right here okay so now let me just save them and there we go so this is going to be it for the mongodb setup or the mongodb connection whatever you want to call there now let me just create a user model right here okay so word in the word is a model now let me just say that or models will be fine inside that I'm going to just write like user.js right here okay so what is a model as the name suggest that it's going to be the model for our specific user like how our user should look like right here okay so here we just have to create a schema like how our user should look like so we would just need the user email and also the user password so first of all let me just grab my come on import my Goose if I can get the from mongus and I'm going to also get the schema we can just write the manually if you wanted to but I want to get that from um Mangus as well just to clean out every single thing so now let me just write like a user schema and it's going to be equal to the new schema right here and now let me just close that and inside there we're going to be defining our user something like this so the user is going to take the email and the email type will be now set to string and it should be also required as well okay and now let me just duplicate then change that to password and the type will be set to string that's correct and the required will be set to false um yeah I guess that be so now let me just provide a Time stamps as well so I'm going to just use like time stamps and now let me just set that to true I know some people will say like Huzan it should be true but if you want to provide like some sort of a GitHub authentication or I don't know Google authentication so for that initially you have to set your password to FSE right here then you will be able to work with this so that's other story if you want to learn about that so you can watch I don't know YouTube video or something like that but if you want me to make a video on that so I'm going to also make a video on there if you want me to okay so now let me just create a schema or model right here so now let me just create a user and do modal first of all you're going to be checking our models if you already have our model so then just use that if you don't have the model so we just have to create separate Mongoose model right here so I'm going to just write model I'm going to give a name of like user and inside there we're going to be also providing our schema which we just created like user schema oh my God why it's not giving us auto complete user schema there we go now underneath that we just have to export our schema so I'm going to just use like export default and our user right here okay so now let me just save them and yep that's going to be it for the user right here that's amazing the next thing which I want to do is that I want to create a session provider right here okay so now let me just create that very quickly so I'm going to just create a folder given name of like your t or your tails you know youra will be fine because we just only want to create a session provider so let me just write like session come on s e s i o n p r o v i d rjs and inside the session provider we just have to create our off provider right here okay so we are going to be getting the session provider uh so for that we have to make it like a client component right here so now I'm going to just import the session provider session provider if you can use us the auto complete it's not so session Provider from where from the nextjs and let's just go to the off and also specifically you want to go to the react right here okay so I want to double check so session and provider and I'm going to hit enter and there we go and now let me just create my off so I'm going to just write like off provider and we are going to be wrapping our entire application uh on this out provider right here so that's why we are creating that separately okay so yeah now let me just return my session Prov and we don't want that now let me just close that right here and AI is completing all of that for me but thank you so much AI now let me just use export default come on default and O provider uh o provider there we go so now let me just save there and this is how we going to be creating our o provider right here we don't have to do nothing but we just have to import our session Provider from the next off and we're going to be just creating our own provider right here or a custom provider or whatever you want to call that okay so that's that and now let me just go ahead and use this session provider right here I'm going to go ahead and go to my app then I'm going to go to my layout right here and here we have a lot of things so now let me just go back the first thing which I want to do is that I'm going to grab a few things but you know what I'm going to leave that a bit later but first of all let me just grab my get server session from the next off so I'm going to just write like get server session from my next off and I'm going to also grab my session provider as well which we just created right here we are not going to be grabbing them from the next off let me just remove them and we don't need this C cly Braes right here and we are going to be grabbing that from our UIL folder and then we are going to be using our session provider right here okay so that's then now let me just create my session right here so I'm going to just create an instance of there I'm going to create like con session and it's going to be equal to event and get server uh session right here and now let's just execute that right here okay so that's then now underneath this one oh it should be a synchronous function so now let me just P the snc right here I'm going to wrap every single thing or all of these children inside the session provider right here okay so this is what we need so I'm going to just remove this component and now let me just replace that with this children right here we're going to be also using our navigation or nabar right here but we're going to do that in a few seconds now let me just open my terminal let me just set that to the right right here come on like so let me go back so you guys can see everything a bit better and I'm going to just use my npm run Dev right here and this is how currently things looks like so I'm going to just disable the dark mode right here remove that and also remove or you know we going to leave that right here and the first thing which I want to do is that I'm going to create my naar component right here so now let me just create a separate components sper come on components and inside that we're going to be creating a Navar component so navb bar. jsx right here now let me just use the rafc but I'm going to also make it so that it's going to be the use client like a client component so now underneath that we're going to be also grabbing the link component and also we would need a few things from where from or next off part here and now you want to get that from the reactjs so what do you need we need the sign out and we also need the use session right here as well we're going to use that in a few seconds but we're not going to be using it right away so now let me just create um I mean like let me just uh grab my data and I'm going to give a name of like session and it's going to be equals to the use session right here and execute there okay so now inside there we're going to be writing a lot of jsx so now let me just rename them n right here and I'm going to also provide a few classes to like BG of totally black and also it should be fixed as well and petting I'm going to give him like four pixel all around right here and I'm going to make it like container and also margin for the XX will be set to Auto and now inside there we're going to be creating a UL the first class will be flex and justify will be set to B and I'm going to also provide the height of screen like totally full and flex will be set to colum now inside that we're going to be creating just a div you can give any class you want but in my case I just give him a name of I like class of one now let me just create a Aline right here and I'm going to give him margin for the xaxis will be set to four and margin for the top will be set to five right here and inside that we're going to be just creating a link and it should go to first of all the home screen right here and I'm going to also put a few classes to it so like text will be set to totally white and also the font will be set to Bard and I'm going to set that to home right here and now let me just save that and let's just check this out B but we got to use this nail bar somewhere then it will give us or U screen right here anyway so that's that I'm going to duplicate this Li right here and I'm going to just change uh this hre right here to dashboard which we did not create not right now so D B Rd there we go and everything else should be cool so Dash board right here okay so yeah now let me just save that and underneath this div what I want to do I want to just create a separate right here because here we are going to be doing a bit of magic but we're not going to be doing that right away okay so now let me just create a DA with the class of off and inside that we are going to be also creating my uh react fragment right here and now let me just create my lii or you know what let me just grab this Li right here let me just copy this Ali and place it right here and I guess everything else should be cool but I'm going to just change that to login right here and this one should be uppercase login okay so yeah that's then now let me just duplicate the one once again this align duplicate that once again and change that to the register right here so let's just change that to register there we go and this should be a lowercase R okay so that's that and I'm going to also provide the margin for the top of some arbitrary value or you know what in this case we're not going to be providing the margin top but margin bottom of some orbitary value like two rims would be fine I'm going to just save this file and now I'm going to have to use this naar component somewhere so that we can see the result of that so now let me just copy that and we already exported that right here and I'm going to just use it right here inside this body I'm going to put my nail bar and now let me just close that and hit enter so it will just Auto completed for me now let me just save that and refresh and yeah next off use session must be WRA in the session provider component right here and yep my bad I'm going to cut the NAB from here and I'm going to hit enter right here let me just hit enter right here come on like so and I'm going to place my name bar right here and now let me just save them and refresh and here you can see we're now getting our home and we are also getting the dashboard right here let me just make that smaller and here you can see we now getting the login and also the register as well okay so yeah everything is working successfully now the first thing which you have to take care of the register screen but we're going to take care of that in a few seconds but first of all we have to create an API for there so I'm going to just create a API come on oh my God API and inside this API folder we are going to be creating one separate folder for the register so register and we want to create a separate uh file like R.J inside that register right here okay and here what we have to do first of all we have to grab our model user right here from that models right here and the next thing which you have to do is that we also have to grab our connection to our mongodb database and I'm going to also grab my bcrypt or you know we don't have to specify the JS so now let me just provide a b right here and we also need the next response right here and there we go let me just go back and underneath there first of all we going to be creating our function like uh not sing but cost post and it's going to be equal to the sing function and it's going to take the request right here RQ EST and now here what do you want to do uh we just want to grab a few things from the user like a username the email and also the password and also the confirm password as well and it should be in uppercase P right here and it's going to be coming from AED and then request. Json right here which means like from the user okay so now let's just for a little bit of or validation so if the user did not specify the password or the user password does not equal to the confirm uh come on confirm password which we are specifying from the user so what do you want to do we just want to return like a new um next response right here or you know we don't have to specify new we just have to write uh return and next response and inside there we're going to be using json. stringify and here inside there we're going to be specifying the error and here uh passwords uh come on p a s RDS passwords do not match baby you got to do some about there and I'm going to also specify the status code of 400 right here so which means like error now underneath this FNL statement what do you want to do we just want to connect to or DB so aent and then connect DB which we are already gramming so this line of code allows us to connect to our database and now let me just check for the existing user so now cons exis user there we go and a and now let me just use user and find one and this find one is amongus method which will allows us to find only one thing so in this case we are specifying the email so which we are already grabbing from the user right here we are now providing their email right here so it's going to first of all check that so now let's just check if you have the existing user so what do you want to do you just want to return uh next response and I'm going to just specify oh you know what in this case we have to use the new word here because uh we are not even providing the Json or anything like that so we have to use the new and I'm going to also use the new resert keyword as well so I'm going to just use like json. stringify and inside there we're going to be specifying some sort of error and I'm going to say like user already exists okay and you know what I'm going to also specify the status code of uh status code of 400 right here so which means like error so I guess that was it about for the validation now let me just hash my password right here we are not going to be sending just a regular password we first of all have to provide some sort of a Sol to our password then we are going to be sending or then we're going to be saving that specific password right here so I'm going to just use like con hash password right here and it's going to be equal to this bp. has and this hash is a method uh which this bcrypt is giving us this BP package is giving us this hash method and first of all we have to specify some sort of a thing in this case we want to provide the password right here so we are now providing a password so what it will do to our password it's going to add a lot of gibberish right here so in this case we are providing 10 so it's going to add 10 gibberish world right here so let's suppose if our password is like Alex so it's going to make it like this um I don't know and it's going to make it like uh here it's going to be Alex a and then here we would have L and then we also have X and something like that so it's going to add 10 salt right here okay so now let me just remove that and the next thing which I want to do is that I'm going to just create a new user so I'm going to just use like con new user and it's going to be equals to the new user right here and here we just have to specify first of all the username I'm going to also provide the email and also the password as well but the password should not be just a regular password which the user is giving us right here so the password will not be this one the password should be this hash password right here so now let me just copy that now let me just place that right here and the password should be that hash password right here so now for the catch block we just have to return new and next response and here we have to specify the error which we are getting right here and the status code will be 500 right here in this case and for the triy block we're going to be using a and new user and let's just save the into our database right here and for the response we are going to be showing this response to our user like next response and now let me just provide some sort of response like user is or user successfully registered or something like that and I'm going to ALS oh my God what the hell did I do okay so I'm going to also specify the status code and the status code will be set to 2011 which means like create it right here I'm going to save this file and finally let's just export or we are already exporting that right here okay so yeah this is how we are going to be registering our user right here so we provide a lbel of validation right here but you can can provide like more than that but you can provide a lot more validation than that okay so that's then now let me just go ahead and implement the UI for that so I'm going to go back from this API folder and I'm going to create a separate folder give a name of like um what do we call a register right here because currently we are registering our user and I'm going to provide my page.js right here because currently we are working with the UI so it's going to be a use client right here and I'm going to write an RFC register okay so if I just sem my file and now let me just click on uh register right here which you can see at the bottom I'm going to click on that and it's going to brings us to that register uh page right here but I don't know why it's broken or something like that and we cannot see that register because it is hidden underneath that um navigation right here so yeah so what I want to do is I'm going to go ahead and go to the globals and let's just remove all of that styling from here let's just remove them and here you can see we're now getting our navigation and if I click on the login it's going to give us it's going to give us a 404 page because currently we don't have any login screen but if I click on the register it's going to brings us to this uh cool page but the register text is hidden underneath this navigation right here so that's why we cannot see that so now let me just create this register component so we are going to need a lot of things to grab first of all so we are going to first of all grab the use router from where from the next not the router but from the navigation as well and we are going to also need the use effect as well and we are going to also need the use session uh s e s i o n if I can get there from the next off and react JS and also we are going to need the link and I'm going to also grab the toast uh and by the way I already installed the toast but I did not make a setup for the toast did I yep I did not so now let me just create a setup for the toast so I'm going to create my toast file inside this uh component right here I'm going to give a name of like react react and toast. JS right here and and it's going to be a use client component and now let me just grab first of all the toast container and I'm going to also uh get this link right here which is a CSS link I don't remember the name of that so now let me just go ahead not mango react toasttify right here or react toast whatever you want to call that let's just go there and I'm going to just grab oh my God the screen is totally broken uh let's just refresh there toasttify and here you can see we have this oh not come on we have just a toasttify we we need a react toasttify right here I just need that specific link what the hell man and this page is totally broken I don't know why uh God damn let's just copy there uh CSS link would be fine um I don't know why this page is broken right now but but yeah it is so I'm going to have to just okay there we go so I'm going to just provide this link right here let's just copy them and now let me just place that right here okay let's just provide that right here I'm going to create a function give name of like react toast or you know what uh lowercase react and toast right here you can give any name you want so react toast and now let me just return some div right here and inside this div we're going to be just rendering our uh to toast container right here now let me just use export default of the react toast right here now let me just save that and I'm going to go ahead and go to my layout right here first of all let me just grab my react toast react toast from where from let's just go ahead and go to I don't know um components spoiler inside that we have this react uh toast right here now let me just copy them I'm going to go ahead and underneath these childrens we are going to be placing this react toast right here so now we will be successfully able to use this react toast right here so I'm going to just grab my toast toast from where from my react toasttify there we go now let me just create an instance for my router as well so I'm going to use a router and it's going to be equals to the use router and now let's just execute them and I'm going to also get the data let's just rename that to session and I'm going to also get the status and it's going to be equal to the session c s i o n and Status right here and we're going to get this data from the use session right here and execute them and here what we have to do we have to provide a LEL of check right here so we're going to be doing that check inside a use effect so we are not going to be doing a lot but we are going to be just checking if the if the session status code I mean like if the session status is equal to authenticated so we just want to push the user to the dashboard pass so dashboard right here for the dependencies array we are going to be providing the session status and I'm going to also specify the router itself and so that's there and now let me just write a lot of GSX right here but before I do I'm going to have to check the status first of all or the session status to be precise if we have the session status and if that's not equal to authenticated so then we have to use or then we have to provide this content right here if that's not the case so what do you want to do we just want to like uh navigate or user to some login page or something like that so let me just cre give with a class of minimum height of screen and also the background will be set to to gray of 100 and I'm going to also provide a flex of flex will be flex and I'm going to also specify the items to Center and justify will be set to Center and inside that we're going to be creating one more diff the background will be set to totally white the padding all around will be set to end and I'm going to also provide the rounded and Shadow medium I'm going to provide a width of I don't know 96 would be fine let me just use the hed2 text will be set to two extra large and the font will be set to semi Bard and I'm going to also provide margin for the bottom will be set to four and I'm going to just set that to register r e g i s t e r and now let me just save them and let's just check it out and here you can see we are now getting our register right here because we did not authenticated uh so our session status is not equal to authenticated so that's why we are now getting this uh content word here okay so everything is working totally fine now let me just create my form and I'm not going to be providing any action to it but I am going to be providing my event handler right here so now let me just create a with the class of margin bottom of four and inside that we're going to be providing a label and for the label uh we are going to be providing something but first of all let me just provide a class name of margin for the bottom will be set to four and I'm going to just say like uh I don't know uh instead of providing a label let's just uh remove that label and I'm going to just change that to div inside that div we're going to be creating a label let's just remove this HTML 4 or you know what let me provide this HTML 4 of username and I'm going to also specify the class name of totally block and text will be set to totally gray of 700 uh 700 right here and text will be set to totally small and font will be set to board I'm going to also specify margin for the bottom will be set to two and username right here now let me just save that and here you can see we now getting our username right here and that's looking amazing now let me just create my input so input the type will be set to text and I'm going to also specify the ID of username and also uh the name will be set to usern name come on and also uh the class name will be set to withd will be set to full and I'm going to provide a pairing for all around will be set to two and border and Border come on Border uh will be set to totally gray and totally rounded right here okay so that's then now let me just save that and here you can see we are getting um our input box right here that's also looking amazing now let's just duplicate this stuff a few times so here you can see we have this div I'm going to duplicate this div for first of all the email I'm going to also duplicate for the password and yeah I guess I be but you know what let's just duplicate that once again for the confirmed password as well so now let me just go to the top so this one is going to be for the username and this one is going to be for the email right here so let's just change that to email and let's just change this one to email as well I like like capital E and I'm going to also change that to email as well uh ID will be and also the type will be set to email because we also have this default type of email as well now let me just sa there and here you can see we have an email let's just provide one for the password and also for the confirm password as well I'm going to change that to uh password right here let's just make it uppercase p and also I'm going to change that to password as well and the text will be also password itself okay and I'm going to also change there to confirm password or you know what um password confirm would be fine and for the level I'm going to cut that from here let me just put it right here make it upper case or caml case whatever you want to call that and for the input we are going to be also writing the password confirm right here okay so yeah that's also amazing now underneath this div what do I want to do I want to create one more div right here so let's just create one more div and inside this div I'm going to create a and the type will be set to submit and let me just put a few class names like I don't know margin for a bottom will be set to five with will be set to totally full and BG will be set to totally blue and 500 right here and I'm going to provide a text of totally white to it pairing for the y axis will be set to two toly rounded and for the how St you want to just change the background color of blue to 600 instead of 500 right here and that's it I'm going to also provide a register right here okay so now let me just saell them and here you can see we are now providing a register and everything is okay so yeah you know what underneath this div I'm going to also provide one span right here and if the user already have the account so let's just TR already have an account so you can just log in or sign in whatever you want to call that so let's just create a link and inside this link what do I want to do first of all I'm going to go ahead and go to uh provide a class name of text totally Center and I'm going to also provide text of totally blue of 5 100 and also for the how State we are going to be using underline and margin for top will be set to two let me just provide the H as well the hre attribute as well and I'm going to go ahead and provide a login to it and login uh or login uh login come on log in or you know what login would be fine so now let me just save that and here you can see we have this login button if I click on that this going of brings us to this login page which we already don't have let me just click on this register and there we go this is the UI but now I'm going to also provide my own submit Handler on that form right here on submit when this form is submit so what do you want to do we just want to write handle submit right here and now let's just create the I'm going to copy there right here and underneath this use effect let's just create the right here so we have handle submit and let's just use our asynchronous event object and inside there we are going to be using first of all the event prevent default right here and also I'm going to provide first of all the username and it's going to be coming from the e Target and we are going to be getting the first uh Target value right here now let me just duplicate that a few times we would also need uh the email as well and we would also need the password and also the confirm password as well so this is going to be set to one it's going to be set to two and it's going to be set to three right here I'm amazing yeah I'm amazing okay so now let's this is prob Lait of validation to it so for uh if the user did not specify the username or if the user did not specify the email or if the user did not specify the password or if the user did not specify the confirm password confirm password right here so we are going to be throwing a toast to the user like bro all of the input Fields should be uh filled so please fill all the input Fields right here and I'm going to just return and that's not the case so let's just check if the user uh password is not equal to come on not equal to the confirm password so what do you want to do we just want to throw out one more toast and it's going to say like uh password do not match and let's just return that and if that's not the case and everything uh went successful so then we have to just write toast and error uh for the catch block and let's just provide our uh error right here if everything went successful so we just have to first of all grab the response and we are going to be using aware and fetch that response from this specific API and we want to go to register right here okay and here we also have to specify the method so we are going to be using the method of post because here in this case we are posting the data and I guess that's going to be it so we're going to be also providing the header the content type will be set to application Json and we're going to be sending username email and also the password itself okay we don't need that duplication so let's just remove all of their duplicate stuff let's just remove them we're going to be also removing their email and I'm going to also remove that let me provide my comma here and also here as well let's just sell that baby but we got some sort of error right here uh and we have to close that right here there we go so underneath there when we send our data we're going to be also checking for the response status so if the response status is set to 400 so we are going to be also throwing some sort of a toast so toast. error and this email is already registered uh right here and now let's just or you know we're not going to be providing the return sement for that and now let's just check if the response status um come on status is equal to 2011 so then we have to just create that uh or youo then we have to just use the router. push and we have to push our user to the login page so I'm going to use the login right here and yeah I guess that would be it okay so final thing which I want to do is that underneath this input field or underneath this uh function to be precise right here I'm going to provide a little bit of validation like one validation right here if the session uh status if you have the session status is equal to loading so what do you want to do we just want to provide some sort of a loader so in this case I'm going to just say like loading dot dot dot okay so we don't have to do nothing else but we just have to write this loading do dot right here you can create a separate component and render that right here but I guess that's not going to be the case so finger cross in the Moment of Truth now let me just go ahead and refresh that and here you can see we don't have any hen DB right here let me just make that a bit bigger here you can see we don't have any hosen DB and now let's just provide some sort of a name like uh I don't know first of all let me just create myself hosan gmail.com and also hosen2 would be fine hosen2 would be fine but we also have to change that to uh password input field as well let me just go ahead and change that to pass word as well not this one but this one pass word there we go let's just save that and here you can see that's gone now let me just click on this register button and we should be getting that toast right here uh are we getting that toast let's just right click on there and we are now getting some sort of error right here let me just click on the console and we have to refresh that by the way and I guess we also have to refresh that because we did a lot of changes right here okay so I'm going to refresh that in a few second but let's just try to create myself hosan uh husan in uppercase and husan gmail.com h12 h12 right here now let me just click on this register button and nothing is happening let's just go ahead and go to that register button and okay it's created right here but we not getting the toast uh let me just try to refresh there once again oh no it's not created I figur out the solution for both of these problem it took me a lot of time to figure it out but finally I did the first thing which I'm making mistake is uh I'm not providing this confirm password right here I'm going to have to provide this confirm password and the next thing which I'm making mistake is inside this route uh I'm providing this c n FM password right here and here I'm making a typo right here so let me just show you that so here you can see c n f r i m right here okay so now let me just place there right here or you know let me just select there hit contrl D hit contrl d contrl d one more time time and now let me just replace that with this new one right here which is confirm password so now let me just save that and I'm going to also log both of their passwords to the console so I'm going to use like uh console. log come on console. log of password and I'm going to also duplicate that and confirm password as well so let's just copy that and I made a typo here as well so now let me just start my server by using npm run Dev and it's going to start my server right here and here you can see we are now getting this uh form right here here so I'm going to just specify hosan and also my email and the password I'm going to provide h12 and h12 right here I'm going to click on register one more time and it should be registered and here you can see we are now getting uh that registered popup box right here and it's going to brings us to this uh login page which we did not create it right here okay so here you can see we are now getting hosen2 and hosen2 and we are also getting this message like connected mongod DV right here everything is successfully working and now let me just go ahead and go to my Mong DB and now let me just refresh that and here you can see we are now getting this hen DB right here if I click on that here you can see we have a users if I open that and here you can see this is our password this is our email and also yeah I guess that would be so here you can see here is our password uh I mean like here is our email and here is our password right here which means like we are now successfully uh registering the user next we also have to take care of this login screen word here so as they are suggest inside this documentation so now let me just go ahead and as they're suggesting is that we first of all have to create this Pages for you know that's the old documentation which I currently have uh that's not the one I want I'm going to go back from there and let me just click on that credentials let me just go ahead and go to this provider uh then I'm going to select my credentials right here and inside these credentials I'm going to select this new guy right here which they were suggesting but I don't know where in the hell there is guide and now let me just hit enter one more time One More Time come on they are now suggesting is that first of all we have to create a pages and we have to go ahead and create this file we don't have to create this file we have to create a folder anyways I just lost that so now let me just write a code for that you don't even have to go ahead and go to uh documentation and stuff like that so what I want to do is that inside this API folder I'm going to right click on there and create a folder and I'm going to create first of all the author folder and inside this folder we are going to be creating one more folder and which will look something like this so first of all I'm going to provide this bracket then dot dot dot then next off and then let's just close the right here and inside that we're going to be also creating our route. JS and there we go okay so now we are currently working inside um this route right here which is this next off right here okay so now what I want to do first of all is that I'm going to get my next off from next off and I'm going to also get the credential provider as well which we are using right here or we have the right here this credential provider so let's just copy them I'm going to copy that from here let me just place that right I'm going to also get my BCP uh library right here so I'm going to use my BCP BCR ypt from B bcrypt JS right here let me just zoom in a bit and also let me just get the users as well and I'm going to also get the connect DB as well okay so these are all the things that we currently need and now let's is Creed or off option right here so so now let me just export that right away so I'm going to use export cost off uh options opio and there we go inside they we're going to be specifying these providers and providers we have a lot of providers right here okay so we can uh specify the provider for the GitHub for the Twitter and for Instagram right here we have a lot of them but in this specific one we are just interested in this uh credential provider so I'm going to just copy there and now let me just place it right here and I'm going to close there like so and inside there what I want to do is that I'm going to go ahead and and inside there we're going to be specifying first of all the ID in this case I'm going to provide the same ID right here which is credentials I'm going to copy them place it right here and I'm going to make a lower case and I'm going to also provide a comma and the name I'm going to also give the name of like credentials as well okay so let me just make the lower case as well but you know this one be uppercase it doesn't matter but I'm going to just make it uppercase and now let's just specify work credentials right here okay so it's going to be in lower case so now here we have to specify different kind of credentials right here so I'm going to specify the email for the email we just have to write a label and we are going to just writing the label of email and I'm going to also specify the type of text right here now let me just duplicate that one more time and I am going to change the label to password in this case and it's going to be also set to password if I can select that and I'm going to provide password right here in uppercase and this one will be in lower case right here underneath both of them let me just uh go back underneath both of them we are going to be creating our authorized function right here are they creating the okay there we go so we are going to be also creating this authorized function right here so you know I'm not going to copy that because I know a lot of you will say like well then you are just copying stuff from the documentation you don't have to do that yeah I'm not going to do that let me just point that credentials from there and put it right here and inside that what I want to do I'm going to first of all connect to my database so connect d B and also let's just execute that right here and I'm going to use my try and catch blocks and inside this try catch block um what I want to do is that for the cage block I'm going to provide a throne new error and I'm going to just specify the error right here which we are currently getting okay for the tri block what do you want to do we just want to first of all get a user so I'm going to use like uh cons user aware and user. find one and this is the Mongoose method which allows us to just find one thing so I'm going to specify credential . email right here and we're going to be just checking the user based on the specific email right here okay so that's then now let me just save this file and underneath this user what do we have to do we have to Prov a lbel of validation right here if you have the user so what do you want to do so we just want to check for the correct password so I'm going to write like cons is password correct and we are going to be using a and BCP package which we are already installed right here and now I'm going to use the compare method inside then and this compare method is coming from this bcrypt Library which will just compare our previous uh password and also the new one as well okay so yeah now I'm going to just specify the credentials. password come on PS w o r d and I'm going to also specify the user password right here I'm going to save this file underneath this correct password and also inside this if statement we are going to be creating one more statement right here so we are going to be also checking for uh is correct password so if the password is correct so what do you want to do in that case you just want to return the user right here but but if that's not the case so we already proved this uh throw new error right here and I guess that should do it okay so yeah now underneath this array what do you want to do we just want to provide our call backs right here so callbacks uh and here we're going to be providing different kind of callbacks so are they providing a callback right here let me just search for that sign in callback and uh log out callback and all of them right so in this case we're going to be also creating similar sign in uh like this one but not in the same like this one so now let me just create that okay so we're going to be using the ASN function and I'm going to just write like sign in and we are going to be providing the user and also the account as well now inside that I'm going to be checking for the account if you already have the account so we are going to be just checking for the providers uh and if the providers is equal to the credentials uh but not triple equal to but double equal to the credentials so what we want to do we just want to return true right here and that's it okay so finally let's just export all of the things things which we currently created right here so I'm going to just export first of all con Handler and it's going to be equal to the next and I'm going to also specify the off options right here underneath that we're going to be also exporting the Handler as get method and also Handler as come on Handler oh my God as uh post method right here there we go so this is how we are going to be creating the back in functionality for um what do we call it for this API right here okay so we are not doing anything else but we are using this uh buil-in credential I mean like uh credential provider method right here and if you go ahead and go to some other one like uh there is a lot of them like if you want to check for a GitHub so you can go ahead and click on the GitHub right here and you can just provide this GitHub and you can literally copy them I mean like you can just register this GitHub ID and also this GitHub Secret inside your EnV file and that's it okay so I'm not going to go into that much detail if you want me to go into that much detail so feel free to comment and I'm going to do my best to make a separate course on this next off part here anyway so that's all of the content so what I want to do is I'm going to just create a front end for there okay so let's just close there and inside this app folder we are going to be creating one more file or folder to be precise I'm going to give a name of like login and inside that we're going to be also creating our page.js word here so the first thing which I want to do is that I'm going to make it a use client component right here and I'm going to import first of all the link I'm going to also import the use router come on use router from not the router but from the navigation and I'm going to also get the use effect right here and we're going to also import a few things from where from the next uh O Come on not like this but we got to go into the next o and then we have to go into the react part here and we are going to be importing a few things like sign in uh and also the use session as well come on not this one use s e s i o n yep there we go and I'm going to also grab my toast so toast from where from the react toasttify right here there we go I'm going to go back and now let me just write RFC and I'm going to give him a name of like login you can give any name you want and there we go so now let's just try to use them so I'm going to first of all create my router and it's going to be equals to the use router I'm going to also provide um I mean like I'm going to also destructure the data as a session and also I'm going to uh get the status and session status right here and it's going to be coming from the use right here and now let's just execute them for the use effect um let me just find the use effect right here we are going to be checking the same like if the authentication is equal I mean like if the session uh status is equal to authenticated so then we just want to uh push our user to this dashboard right here okay there we go and I'm going to also provide a dependency array of session status right here and also the router itself okay so that's then now I'm going to just create a lot of GSX right here but before I create that jsx first of all let me just check if we have the session status is not equal to the authenticated uh yeah this one right here if the session is not authenticated then we have to print this content right here otherwise we don't have to print nothing at all so I'm going to just find Min height will be set to screen and not like that but screen and I'm going to also provide a background of totally gray 100 right here F and items will be set to Center justify will be set to Center as well now inside that we're going to be creating that same BG white right here padding will be all around set to eight totally rounded and also Shadow will be set to medium and width will be set to 96 inside there we're going to be creating H2 and I'm going to provide a text of two Xcel and also the font will be semi bold and also I'm going to provide the shadow sh of medium and I'm going to also provide a width of 996 in this case and I'm going to just provide a login let's just save that let me check it out right here and guess what the default export is not anyways that's gone and here you can see we are providing this login but that's out of this box right here I don't know why but that's out of this box right here why in the hell am I providing the width right here and also that shadow we don't have to Pride that let's just remove that from here s my file and that's looking cool anyway so now underneath that what do we have to do we are going to be doing a few things first of all we are going to be creating the form uh if I can create that today let's just remove that action and also inside that we're going to be creating first of all uh div with the class of margin bottom of four and inside there we're going to be also providing the label for the HTML 4 uh I'm going to provide the email and also I'm going to also provide a lot of classes right here like block and text will be set to gray of 700 700 and also text will be totally small font will be set to bold and also for the bottom will be set to two right here okay so inside that we're going to be also providing the email and underneath this EMA I mean like underneath this label what do we have to do we just have to write our input field right here and the type will be set to email as well I'm going to also specify the ID of email as well and yeah name will be also set to email and also I'm going to put the class names of like with will be set to totally four and also pairing will be set to two border and also border will be set to totally gray of 300 and also totally rounded so now let me just sell there this is how it looks like right here so we have this email field and that's looking amazing so now I'm going to just duplicate this diff a few times right here so we have uh diff for the email we have for the password and yeah I guess that would be it so now let's just uh change a few things so in start of writing an email I'm going to change there to password and password here as well and I'm going to also change these stop to password as well so now let me just save that and here you can see we have one for the password and one for the email word here amazing so now underne this div I'm going to be creating yet another div and inside that div uh we are going to be creating one button with the type of if I can write it today what the hell is wrong with my ID today so I'm going to just change that to submit and also let me just put a lot of class name of margin bottm of five and also with will be set to totally full background will be set to totally U blue 500 and text will be set two totally white and pading for the Y AIS will be two and totally rounded once and somebody how over it so what you want to do we just want to change the background color of that to totally blue of 600 and inside this button we are going to be just writing login so now let me just save that and here you can see we have this login button right here which is looking supremely awesome so now I need this St what do you want to do I'm going to just create a span and I'm going to write like don't have an account and yeah if you don't have the account you should create one so I'm going to just write a link and inside this link first of all the link will go to the register page right here and I'm going to also specify the class name come on class names uh of text totally Center and also text will be set to totally blue of 500 right come on 500 right here and when somebody have over we just want to provide underline uh and also margin for top top will be set to to right here register now let me just save that and here you can see we have this UI right here okay so everything is a okay and everything is looking totally beautiful but now we have to create that Handler right here so I'm going to provide that Handler first of all um I'm going to just provide the on submit when somebody submit this form like uh then we have to just create this on submit Handler right here okay so now let me just copy that and here I'm going to create that on submit Handler right here okay so I'm going to provide the sing provide the event object and inside that we're going to be providing the E prevent default right here e f a l t I guess that's correct so I'm going to also get the email and we are going to be getting the email from the e. Target and we are going to be getting there from the first input field right here let's just duplicate that change that to password I'm going to set that to one and there we go so now let's just for a little bit of validation right here so uh if the user did not specify either the email or the user did not specify the password so what do you want to do you just want to show some sort of a toast to the user like error and please fill all the input Fields there we go f i e l DS and yeah I guess that would be it and now underneath there we're going to be creating or we are going to be fetching their data right here okay so I really want just use that let me just use that okay so yeah we just have to uh first of all uh go ahead oh that's not what I want that's not what I want so now let me just write con rest and it's going to be equals to AED and sign in which we are already grabbing right here and here we have to specify that credentials c r e d i e n t a LS let me make sure the spelling is correct because we have to specify this credentials right here so I'm going to copy that and place it right here and here you can see that spelling was totally wrong okay so now I'm going to just specify the comma and inside that we're going to be just redirecting the user to nowhere so by default it will redirect the user to somewhere so we don't want that we want to set that defaults and I'm going to specify the email and also the password which which we are getting from the user okay so now underneath that let's just check for the errors if we have some sort of an error inside this request so if you have the error so what do you want to do we just want to check specifically for the URL right here let's just check for the URL right here and if you have that so we're going to be just writing router. replace and we are going to be redirecting the user to dashboard right here okay there we go now underneath that what you want to do we just want to create a toast. error and I'm going to provide the invalid credentials right here what if that's not the case so what do you want to do we just want write toast um toast. success and we just want to say like successfully Su oh my God s c e s Fu y log in right here so now let me sve them and here what I want to do is that I'm going to refresh them let's just check out let me just even restart that right here so I'm going to use like npm run Dev so now let me just provide my user credentials like we have hosan gmail.com and I'm going to provide HX n12 right here click on a login and invalid credential right here I don't know why but it is not giving us the invalid credentials after wasting a lot of my time I finally figure out the solution to that problem first of all I made a typo so so I'm going to just select this one I'm going to select the second one right here and I'm going to also select this one as well and I'm going to just place this spelling right here which is c r e d i e n t a l s okay so that was the first typo and also I made a mistake right here here we shouldn't be providing the providers we are going to be just providing a provider like a singular provider right here now let me just saell them and I'm going to go ahead and write in PM run Dev and hit enter right here and now I'm going to just refresh my browser right here and here you can see we have our login UI right here I'm going to provide my own email and I'm going to also provide my hxn and12 right here I'm going to click on login and here you can see we now successfully log in and we are redirected to this dashboard right here but now that's cool we also have to take care of this dashboard and also this navigation and that's it baby so for the dashboard we don't have to do crazy stuff we just uh first of all let me just remove all of their tabs I'm going to go ahead and create my dashboard folder inside this app I'm going to write dashboard and inside that we're going to be creating page.js right here and the first thing which I want to do is that I'm going to get my get server um server session if we can get there from the next off and I'm going to also get the redirect right here so import redirect uh like so but not like that so redirect and we're going to be getting there from the next navigation right here underneath that I'm going to use the RC to create our dashboard and also I'm going to just get my session first of all I'm going to write call session and it's going to be equals to AIT and get server session right here let's just execute that and here we're going to be checking if you don't have the session so now let's just check if you don't have the session so what you want to do we just want to redirect the user to just a home screen right here if that's not the case so we are going to be just writing um or jsx right here now let me just create the UI for uh their dashboard right here so we're not going to go into that much details but I'm going to just provide something to show to the user okay so you can like provide a lot of stuff for the front UI if you wanted to but in my case I'm not going to go into that much detail so items will be now currently set to Center and justify will be come on justify will be set to I'm going to also Pro the piring for all around will be set to 24 and inside this D I'm going to be getting my H1 with a class of 10 T totally green of 400 and also totally border and pting all around will be set to four and inside they we're going to be just writing like user successfully uh logged in and also I don't know here you come on here you can put anything uh you want and now let me just save them and here okay the default export is not working or what the hell is that okay so we have asynchronous function uh so I'm going to just make it Asing function so now let's just save there and we're going to be also making it okay so here you can see this is how it looks like if I can make it PSE to the dark so this is how the current dashboard looks like right here but currently we just have only one problem right here like we already successfully logged in but we can still see this login right here and we can still see this register if I click on that it's not going to push me to that Pages it's going to redirect me to this dashboard right here but I don't want that I'm going to get the user email right here and I'm going to also get the sign up button right here and that's what I'm going to do right now so I'm going to go ahead and go to this na bar right here and here I already wrote this comment for myself so I'm going to just remove that right here and here I'm going to just check if we don't have the session uh so what I want to do I want to render this content right here which we have this uh fragment I'm going to cut that from here and I'm going to also provide the S Clause right here so for this if you don't have the session so we're going to be providing this code right here like just login and register but if you have the session right here so what do you want to do for that we are going to be creating yet another uh react fragment right here and we are going to be also creating a paragraph with the margin bottom of four and here we just have to get the user uh email so I'm going to just write session. user and if you have the user so we just want to get an email from that user right here and I'm going to also provide the lii right here and inside this Ali we are going to be creating a button and on click Handler what do you want to do in that case we just want to to specify the sign oh you know what let me just for the C braces right here sign out which we are already grabbing I guess are we yep we are getting this sign out right here so now let me just use that right here and also I'm going to put a little bit of classes to it so last name will be now set to padding will be all around set to two ping for the x-axis will be set to five margin for the bottom I'm going to provide like uh I don't know two rims would be fine and also the background will be set to totally red of 600 and I'm going to just make it like totally rounded and I'm going to put the log out right here and there we go that was our entire course on uh nexs right here so here you can see we are now currently getting that button right here and we are also getting this specific user email right here so yeah that's that we can go ahead and go to the dashboard we can go to the home screen but I guess I forgot to show you how to modify this screen I mean like that's looking totally cool as well here you can see oh that's looking uh let me just go ahead and go to the home screen which we currently have right here inside a page and I'm going to remove all of that content right in here all of that jsx to be precise let me just cut that and I'm going to do a bit of magic here as well now let me just make the like use client component and I'm going to just get first of all the link uh link right here and I'm going to also get the use session right here from from the next and react and now inside there what I want to do is that first first of all I'm going to get my data and also let's just change the name of there to like session and it's going to be equals to the use session word here and underneath that what do you have to do let's just remove that right here I'm going to return and if you don't have the session what do you want to show to the user or if you already have the session so what do you want to show to the user in that case so let's suppose if you don't have the session so what do you want to do we just want to create a div the class of flex and also Min height will be set to to the screen and also Flex will be set to column and items will be set to Center justify come on uh justify will be also set to between and I'm going to provide a pairing for all around be set to 24 and we're going to be creating a link it will go to um the login screen right here and we are going to say or you know let just also provide class names border and ping for the xaxis will be set to four ping for the Y AIS will be set to two text will be set to totally red 400 right here and totally rounded and I'm going to provide like um I don't know please log in to see the content or something like that and yeah if that's not the case so what do you want to do we just want to create with the class of flex and Min height will be set to screen and I'm going to also provide a flex of totally column and items will be set to totally Center justify will be also set to between and ping for all around will be set to 24 and inside we're going to be just creating one paragraph with the classes of like text totally green 400 right here and I'm going to also provide a border and also ping all around be set to five welcome back or something like that and I'm going to just provide this smiley face right here so now let me just save that and refresh there we already log in so that's why we are now getting this emoji and we are getting like welcome back buddy but if I log out and here you can see we are now getting like please login to see the content and I can just click on there and here you can see it's kind of brings us to this login screen right here I can click on the login or I can create a user right here and I can go to the login create a user let me just create some other user like uh I don't know Alex would be fine like Alex and Alex gmail.com and alex12 would be fine alex12 would be fine now let me just click on that to register that user right here and now we can log in as that user so now let me just write like Alex gmail.com and alex12 right here and if I click on login and here you can see we're now getting like user successfully logged in and here uh you can put anything you want so here you can see we have Alex gmail.com email right here we can go to the dashboard or we can also go to the home screen right here which is totally amazing and yeah that was a huge journey and I hope this course help you a lot so I'm going to just ask you one thing please I'm asking you just only one favor please follow follow me on GitHub if you don't want to subscribe to this channel you don't have to I mean like if you wanted to subscribe to this channel feel free to do that uh but if you don't like my content but if you still like this course and you want to support me so yeah if you follow me on GitHub for me it's like you give me a lot of money you didn't even skip any of uh the air during my video and you did a lot for me okay I'm just asking you this one favor if you wanted to follow me on GitHub I would love to see you there and if you have any questions so you can follow me on Twitter and I'll be more than happy to help you there and yeah if you want to support this channel so do subscribe and yeah thank you so much for watching and that was a huge journey and I hope it helped you make the next year Superstar so yeah I'm going to see you in the next course which will be I guess on the uh GitHub or maybe on goang programming language I'm not quite sure about that so if you like some course so feel free to comment below and I see every single comment I'm going to respond to your comment if I like your suggestion I'm going to definitely make a course on there love you all see you in the next course bye-bye

Channel: HuXn WebDev

Views: 49,768

Keywords: #NextJS, #WebDevelopment, #ReactJS, #JavaScript, #FrontendDevelopment, #Programming, #ServerComponents, #APIRoutes, #Authentication, #Authorization, #ResponsiveDesign, #Internationalization, #TechTutorial, #CodeLearning, #WebDevCourse, #ProgrammingSkills, #LatestNextJS, #NextJS14, #WebDevelopmentCourse, #CodingBootcamp, #LearnToCode, #TechEducation, #SoftwareDevelopment, #NextJSProjects, #AdvancedNextJS, #CodingJourney, #JavaScriptFrameworks, #WebDesign, #OnlineLearning, #CareerBoost

Id: GowPe3iiqTs

Length: 304min 41sec (18281 seconds)

Published: Tue Nov 14 2023