Next.js Full Tutorial for Beginners | Next.js 13 Full Stack App Using App Router

Hello friends welcome to the complete next.js tutorial in this tutorial you will learn everything you need to know about new next.js and by the end of video you will have created this full stack application this is the home page we'll create all these Pages using new next.js app router and after that you will learn how to fetch and cache static data and how to fetch Dynamic data on the server side to do that we will be using mongodb and get all this information from a database by the way we will create this dark mode toggle button and you will see how easy to use context API in next.js finally we will Implement nextges authentication and you will learn how to protect routes how to create a new user and how to log in with user credentials and social media accounts after that we will be able to see this protected dashboard that shows the user posts and we will be able to add any posts as you can see it adds the new post without refreshing the page and also you can delete your posts and it revalidates this data immediately using next.js SWR mutation it's a great project to understand all the basics of the new next.js routing server side and client-side rendering styling data patching creating an API and implementing crude operations SEO improvements next off user sessions and more and I will add all the timestamps in the video so you can easily find the topic you want to follow and if you want to see more next JS Projects please like the video and let me know which Technologies you want to see in the next application if you are ready let's get started before starting I want to give some short information to help you understand why we should use next Js as you know next.js is the most popular react framework that is used for building server rendered web applications in the previous video I explained what's the feature of react and why react team recommends using a framework if you didn't watch that video I highly recommend you to watch it first it's a really short video and I believe that it will answer all the questions in your mind about react and after this information let's see why we should use next.js firstly we can create all the pages using a single folder every child folder in the app router represents a new page so it's really easy to create and group pages in next.js in react on the other hand we have to install a library and create our custom router secondly if you are building a full stack application you can create your own API using next.js again we can create API endpoints using the folder structure and handle requests in route files but in react to do that you have to use a framework like express.js and create a different application first and the most important feature of next.js is being able to use server site and client-side components together so you can fetch data on the server side and improve the SEO of the application and also you can create client-side components to interact with users I explained what SSR and CSR in the previous video you can go and check it out if you haven't and the last thing I want to mention is the next.js optimization next.js uses code splitting to improve the applications initial load time it splits the bundle of the application into smaller chunks and search them to users only when needed and also next.js automatically optimizes images by compressing them and generating multiple sizes for different device resolutions these are the most important features of next JS and there are many others so let's start creating a full stack application and see how to use them in a real world website OK I created a new folder and inside this folder let's create our application to do that I'm going to open up the next documentation and here I will choose installation and make sure node.js is installed on your computer of course if you are watching this video you already know the fundamentals and I don't want to make this tutorial too boring by explaining every single step so don't worry I will explain only what you need to know okay after that you are gonna see this comment I'm gonna copy this this command allows us to install all the dependencies to build a next app and also it creates the default folders and files basically it sets everything up for us and we don't need any additional configuration I'm going to open my terminal and paste here and I will say dot that because I want to install everything in this folder if you don't write here dot it's going to create a new folder I don't want to do that I will say enter and it's gonna ask some questions to set up our application we can use typescript but I plan to create a typescript tutorial before using it in my videos and that tutorial will probably be on the channel in June and let's keep going after this information we are going to be using yeslint I will say yes yes lint is a tool that helps us to find and prevent potential errors when we start coding you will see how it works I don't want to use Tailwind it's not a good idea for beginners would you like to use Source directory you don't have to you can say no but I prefer using Source directory because it helps me organize the folders I will say yes of course we are going to be using App router I'll say yes and the import Alias helps us to find the location of files because normally if you don't make any configuration you might have to import files like this another folder another folder and finally let's say components and network for example but if you choose Alias only thing you need to do is writing here at for example and it means you are in the root directory and just say components like that so I will say yes and it's going to be at and that's all during this process let's check the documentation and see how to start our application and as you can see we are going to be using npm brand Dev or if you are using yarn yarn run down and it's going to start our application localhost 3000 let's do that I'm using yarn so I will say yarn run that I will enter as you can see it's running I'm going to open up and it's here so let's see which files allow us to see all these HTML elements as you can see those are our libraries this is the cache data and we have public and Source folder in this public folder we will add all the images and other media items let's do that actually I'm gonna delete those SVG files we don't need them and I'm gonna drag and drop my files like that as you can see social media icons and other images okay close here and the source folder will include our app folder and our components and other stuff let's create actually I will say components and let's say utilities for example basically you can add here anything you want your libraries if you are using database you can create your models database connection we are going to do all of them later but now let's talk about app directory to understand the app router let's see the structure first every page that we are going to create in the application will be located in this app folder so this folder represents the home page to create different pages the only thing we should do is create different folders in this main folder and to create sub Pages we will create folders in the related parent folder we just created a simple tree that includes different sub trees okay we have certain names for each page but how are we gonna create Dynamic names for each blog post it's really easy just use square brackets and provide an identifier like slack ID or whatever you want so let's get back to the project and see how to do that so let's create our pages I will come here and as you can see this is the home page I'm gonna delete everything here we don't need them anymore and I can shrink this terminal or close okay and I'm just gonna create div here by the way as you can see I can't use this shortcut to create HTML elements to prevent this I will come here and say jsx let's try one more I will say do and as you can see it's here I will enter okay perfect and I'll say home and it's here let's create other pages I will come here and say about and let's create our page file I'll say page.jsx I'm gonna create my function by using this shortcut and let's change the name it's going to be about page if you wonder how I use that shortcut just use es7 react redox react native extension it's an awesome extension there are many shortcuts you can just check on this page let's turn back and let's create other Pages I'm just gonna copy this paste here let's say contacts I will paste one more let's say portfolio another one is going to be the blog page that's a block and finally dashboard let's change this page let's save this okay they are ready let's check I will say about as you can see it's here contact s perfect block okay it works so let's add our sub holder inside this block remember what we are doing we are adding here square brackets and inside you can write slug or ID or whatever you are gonna use to identify your blog posts I'm gonna be using ID and inside again a page file let's create quickly and I will say post or plot post let's see right now if I add here any ID doesn't matter it's gonna load this page it's that easy so it really doesn't matter how you are naming here so I can do the same thing for portfolio I'm going to create new folder and it's going to be let's say category name or I can shorten this it's too long it's just gonna be category let's create our file page file react function and I'm gonna name it it's gonna be category see I will say portfolio and let's say test and as you can see it's here so let's create some pages inside this dashboard I'm going to add a login page a register page and a home page of this dashboard let's do that I'm gonna close them and I will come here and say login [Applause] let's copy this register in our application we are going to have only three pages login register and home page but let's imagine we have other pages like users for example settings logs and as you can see our dashboard has many sub pages and when I write some code inside my authentication folders like login and register finding them can be a little bit difficult but don't worry there's an awesome feature you can come here and create new folder and you can write here any group name let's say authentication alt and inside this folder I can add my login page and register page it's not gonna take this name as a route name what I mean by that if I come here and say Alt and login as you can see it's not gonna work that because it's just a group name if I delete this as you can see it's still here so you can group your pages using this feature I just wanted to show you and I can close here and let's talk about this layout file basically it's a parent component that is used by other pages so whatever you write here is going to apply for all pages let's see as you can see it's here if I go to home page it's here and it's awesome that because we can use our common components like a nail bar and filter component so we don't have to write them again and again for each page and moreover you can create different layout for different routes what I mean by that if I open up blog for example and if I say layout.js and let's say block layout or whatever you say I'm gonna take here to children component and I'm gonna wrap this here and you can write here whatever you want let's say H1 hey this is block basically it's gonna wrap all pages in this folder let's see I'm going to open up blog page as you can see it's here and if I write here any post ID and it's still here of course there's a mistake here that because I use this text before this body tag let's say main layout okay it's here okay now instead of this text let's create our Nail Bar and footer I'm gonna come here and create my component let's see now bar footer let's create our files I will say footer.jsx I will create my function and be careful here we are not using page.js because it's a component it's not a page and I'm going to create navbar jsx and let's use them here I will play this I will say never components footer let's see as you can see perfect let's open up portfolio oops there is an error of course inside body okay awesome right now I can delete this block layout I don't want to add anything here I just wanted to show you and let's actually add here our logo and some links to do that we are going to be using next.js link component as you can see it comes from next and Link and let's say our website name so basically it's an HTML Encore tag of course it works in the app router it allows us to navigate between pages so we can give here any URL href and that's a home page so if I click here as you can see we are going to home page perfect that'll say do of course we are going to give some class names but I'm gonna explain them later I'll say link of course you can write all these links one by one but I don't want to do that I will just use a data here as you can see it includes all the links we are gonna need so using this links array I can map through this array and write each link let's do that I will say link stock map and for each link I'm gonna create a link component here and I will write link dot title and as you can see there's a warning here that because we are using eslint and it says the key property is missing we have to give here a unique key as you remember we have IDs here we can use them I'll say think dot ID and href it's going to be a pink dot URL let's see okay perfect if I click contact about dashboard so it works what about this footer I'll just copy here we are going to add those images later let's open up footer I'm gonna create here a div actually two divs that because first line is for this text and second one is for those images okay it can stay like that let me explain you other layouts and the first one will be looting layouts basically when we navigate between our Pages during the loading process we can add here some indicator like loading text or a spinner or a skeleton component whatever you want it's a great feature for the user experience that because we are not showing a blank page if you watch my react.js code splitting video understanding this process will be easier for you that because in that video I explained how lazy loading and suspense work it's exactly the same thing here but we don't have to import our components by using laser loading next.js does everything for us the only thing what we need to do is decide what we are going to show to user let's try for contact page I will say including Dot jsx my components and it's going to be including let's see of course if I click here you cannot see that that because our application is really fast but if I open my console choose Network here and I'm gonna make my connection a little bit slower let's try right now I'm gonna click as you can see loading and after that we see our page this is how it works and there is one more layout you can customize and it's error.js basically you can show any default error page to user of course for this contact page we don't need that because we are not fetching any data or anything else that can cause an error but later when we fetch any post here we are going to create an error page and you are going to see how it works and that's all remember again the layout JS is our main layout that wraps our components you can use any layout inside your page folder also and you have looting jsx and arrow jsx by the way I forgot how to add font family here by default next.js is using Google font so you don't have to go to phones.google.com and choose any font family and paste to your CSS file just import your Google font like Roboto or anything else and create your font family like that and use it in this class name and let's talk about next.js rendering and how to render components there are two types of rendering the server side and the client site in next.js by default all components render on the server side but you can change them easily by adding this use client interactive if you don't know which one to choose let's watch this short animation from the previous video and remember the difference between SSR and CSR when you visit your website the server receives the request and sends an empty HTML file and a bunch of bundled JavaScript and your browser processes those bundles and renders the final HTML file so the initial page load speed of the application can be slow because of this process and since the page is built on the user's browser search engines cannot index websites properly but on the server-side rendering when you visit the website the server receives the request and renders the HTML page and sends that to your browser so if you have an old computer or phone it's really good because your browser doesn't have to render everything from scratch so it shows the initial page faster but since everything happens on the server side you won't be able to interact with the user if you want to create an event you have to create a client-side component so if you have a highly interactive website it might be really annoying basically choosing SSR and CSR depends on your project so let's see which rendering method we should choose for our applications components so all those pages and components are server-side components how we can see this let's write here console log and let's open up our console here it's still slow let's disable this and I'm going to open up console and as you can see it's empty I will refresh and nothing is here but if I open up my terminal as you can see it actually runs on the server side but how we are going to turn this component into client-side it's really easy I'll just write here use client and that's all and as you can see it's here it actually runs on my browser not on my server but when we need to use client sites as I said when you need any user interaction you are gonna need a client-side component for example for the number we don't have yet but I'm gonna create here a button and if you are authenticated we will be able to log out but to add here logout functionality we are going to be using authentication sessions and it's going to run on our browser basically if you are authenticated we are going to have a user session that includes our user information and when I click on this button we are going to delete this session immediately to do that we cannot use herbicide rendering I'm going to create here on click methods and I'm going to write the logout functionality let's say console log GED out and if I come here as you can see if you need interactivity just use client component if I come here and add here use clients it works if I click as you can see it locked out so let's see here which components or Pages we are going to need interactivity for the home page as you can see you don't need anything we can only add here link uh in this portfolio page again we don't need client sites when I click on those pages we are going to fetch these data and for the blog page it's really important to use server-side rendering that because here we are going to be needing SEO for each page we are going to use different title and description that search engines can index and show them on their Pages now you are going to see later how to create Dynamic page titles and descriptions but for now we are just checking should we use client or server site for about and contact page again we are going to be using server side but for the dashboard we are going to need a user interaction users gonna enter their email and passwords or they will be able to log in using social media and they are going to send them to our API or for the register page it's exactly the same thing and in the home page of the dashboard we will be able to add new post and if you are creating some complex dashboards that you want to show analytics or charts you should be using client-side components and for the dashboard of course we are not going to need SEO it's going to be private only users can see the dashboard page and for the number as I said we are going to be using a logout button here and also we are going to be using this toggle button be careful I'm gonna click here and it's gonna be totally white here I don't want to hurt your eyes be ready three two one and as you can see we are going to be using this interactivity and in this toggle component we are going to be using client-side rendering and this is why next.js is great that because you can combine server side and client-side components and build a complete application and this is why I created this application that because it's a perfect example to show server size and client-side rendering of course in real world there is no application like that as you can see it's an agent's application but also you can add here your blog posts by creating new accounts but I just wanted to show you everything in just one video okay so let's see how to give a style for our HTML elements let's come here I'm gonna close everything and open up Navar again so let's see how we are going to give class name basically we have two ways to give class names first you can use Global CSS by the way it's by default we don't need them actually I can use only here I will copy and maybe here let's copy here I will delete them and paste back I don't want to make our backgrounds white let's say background color and the color will be this gray color and as you can see those links are different there is a default text decoration and color for those links I'm gonna change them let's say anchor tag text decoration will be known and the color will be inherit basically it's going to take the color from its parent and in this situation the parent is body and it's going to be this color let's see okay awesome so when we are gonna use this Global CSS basically we are going to use it only when we use a common HTML element like this and cortex we are going to use those links everywhere in our application so those links don't belong to any page or component it's a common element and we can use it for our layout Also let's create here a container of course it's not a jsx file I should use it like that class name and container and I'm gonna wrap my items and if I come here and write container and background color for example this purple color as you can see it's here I can use it in my pages for example for this contact page I will say class name and contact and if I write here background color and let's say red but as I said it's not a common HTML element it belongs only here we are not gonna use it anywhere else in this situation instead of using this Global CSS we are going to create a module CSS so I will come here and I'm going to create new file and I will say H dot module CSS and I'll say contact and let's say background color this brown color so how I'm gonna use this I will come here and I will just import it here import styles from page module CSS and instead of This Global class name I will say Styles dot contact and as you can see it's here and it's awesome that because remember we have used container here I can use the same class name here let's say container like that as you can see there is no conflict so you can use this class name again and again and if I inspect my page I'll open up my buddy and as you can see this is the global name it's exactly the same class name but if you check here it actually creates a new class name here it's not container anymore this is why there is no conflict then you use module CSS it creates a new class name just like styled components of course you can give any name here it doesn't have to be page module CSS but for the consistency we are going to be using in this way so I can do the same thing for other Pages I'm gonna copy this and paste for each page and let's create our CSS file okay I'm gonna speed up this process I don't want to waste your time basically I'm just gonna import this style and give a container class name for each page and component okay I created all those modules CSS files like that so it's ready to use so let's take care of this container first I'm gonna open up Global CSS and here firstly I'm going to give a max speed 1366 pixels and I will say minimum height 103h so it's going to contain all this screen and let's Center everything margin 0 and also basically Zero from top and bottom also from left and right in this case it's going to be centered I can give some padding from left and right again 60 pixels and I can separate my items like here the first item on the top the last item on the bottom and in the center we are going to have our children component in this case I can use display flex but it's not going to be horizontal I will say flag extraction column and justify content space between perfect this is what I want if I visit other Pages they all are safe not about this never I'm gonna open up my components neighbor and module and also my file here let's actually separate them like that okay it's gonna be container I will copy here and this leak will be our logo this is the link container let's say links and for each link I'm gonna give class name and it's going to be just sleep let me shrink this CSS site and for this button let's say log out that's all I think so what I'm gonna say is a high tier first let's say 100 pixels I'm gonna make this Nail Bar horizontal like that and again I'm gonna separate them logo will be here links will be here justify content space between and I can Center them vertically remember it's 100 pixels so I will say align item Center perfect what about this logo actually I was thinking copy and paste the CSS file but I know some of you want to see how to design so if you are here for only functionalities don't worry it's going to be really quick we are not going to make any complex design I'll just keep font weight is going to be pulse and I'm gonna increase font size like that and for those links I can separate them links display Flex align item Center and I'm gonna give space between them like that and hold this logout button I'm gonna use some padding I will delete border I will give background color it's going to be this green color oops double okay and the color will be white and it's going to be a clickable and finally portal radius three pixels okay awesome let's check okay it's exactly the same I'm gonna add this toggle later when I explain how to use context API for the footer I'm gonna take this here and footer module here again let's give height 50 pixels I will say display Flags align item Center and I'm gonna separate them okay of course there is nothing here we are going to add our images to do that we are not going to be using image HTML tag anymore like that instead as you can see there's an error here it's not an error but it's a warning it says image could result slower loading time and higher bandwidth instead you should use next.js image that because next.js takes our image and modifies it under the hood it adds laser loading it arranges its sizes I'm gonna copy this and I'm going to import as you can see it comes from next image and here we are going to add our source and also alt let's say lamade or your website name let's see our example I'm going to open up portfolio okay for example this image I took this image from paxas.com but if I open this in new tab as you can see it's not attractive openingpexas.com instead it stores our image in the cache folder and this is how it shows our images much faster and let's see how we can add images there are different ways to add images first one like here you can use an external image URL and add it directly or if you are using your public folder as we are gonna do right now we are going to be using this Facebook and other social icons let's do that I will say one dot PNG but as you can see it says we have missing sizes if you are adding your images you have to provide here a width let's say 15 pixels and a height and as you can see it's here we are doing this that because next sales is laser loading our images if you watch my previous video about laser loading you are going to understand everything better giving width and height is really important but if you have any image container here let's create a div here and I will say class name image container let me close this sidebar and instead of giving size for image you can give size for the container like that and you can delete here and say fill true basically it's gonna fit inside this container but if I do that it's not gonna work it's full screen right now that because this image fits inside the closest relative parent and it's our body right now to prevent this I'm gonna say position relative oh I didn't wrap and as you can see it's here but we don't need any container I'm just gonna directly give here width and height I just want to show you how you can do this because for the next images we are going to use container I can delete here and I'm gonna add other images here by the way you can change your Facebook account Instagram and others it really doesn't matter it can stay like that let's see oops I forgot plating this if you are using width and height you don't need feel and they are here okay let's give class name here Styles dot social again I'm gonna separate them align item Center and gap between them will be 10 pixels and I'm gonna add here font size is going to be small like that okay now for each icon let's copy this class name and I'm going to add here and it's going to be icon I'm gonna decrease the opacity 0.6 it's going to be 60 percent and I will say cursor pointer so we can click okay of course you can add here link but I'm not going to add any account they can stay like that if you want to you can wrap them with next.js link but anyway I'm going to close them and I want to show another way to add our local image let's open up sidebar and I can close components and I'm going to open up the home page and here we are going to be using this image hero.png of course you can directly use image source and ALT now you can write here hero.png but also you can import that as a component so I will come here and say the public folder hero.png and here you can give any name let's say hero and I'm going to add this in source let's open up our home page and as you can see it's here but there is one thing different here we didn't provide here any width or height but there is no problem if you are importing your images like that you don't have to write width and height you can just give here class name styles.image and you can give any size using your module CSS file but I recommend using a path here instead of importing it like that and one more thing about images when you add an external image it's going to be a problem let's see I'm going to open up pexels.com let's choose any image here I'm gonna add as you can see there's an error but it's a different error it's a size error let's give it height but even if I do that it's going to be another error here and this is happening because next.js doesn't allow us to use an external image by default if you want to use any different domain name you have to write it in your configuration file next config.js how we are going to do that let's open up next config.js and I'm going to add here external domains to do that I'll say images and inside this object we are going to add our domains it's going to be an array because you can add multiple domains and the first one will be images packshouse.com and if you have another domain you can add it like that but we are going to be using only this website so we don't need that I will delete I just want to show you and let's see right now and as you can see it's here and this is how you can use images when you add in a path here you have to give width and height if you are using external domain just add it here and you can add your images using import let's take this back okay so let's see what we are gonna have I'm going to open up home page as you can see we are going to have two parts this text and this image let's design our home page I'm gonna create a div here class name styles let's say texts and one more is going to be image actually let's say image container in this text we are going to have this title I'm gonna copy let's add a P tag and what else this button CR works actually for those divs I can give exactly the same name let's say item and item not because we are not going to apply any CSS for those items we are just going to separate this container into two pieces first item and second item as you can see their sizes exactly the same so we don't need to change here and let's give class name for title description button let's open up our CSS file as you can see this is by default I can delete them and I forgot here container and let's start as I said it's going to be horizontal align item Center and gap between them will be 100 pixels this Gap and for each item I'll say Flex one basically half of the screen will be item 1 and the other half will be item two let's see here of course we didn't give any width and height this is why it looks like that if you remember we have a class name here I will say it's a hundred percent is gonna fit inside its parents and height will be let's say 500 and I will say object with color and awesome so what about those items actually I can give space between them also I'll say display Flags black extraction column and gap between them 50 pixels like that so let's increase this font size and give this color effect after this item I'll say title font size will be really big like that and I'm gonna give background and it's going to be linear gradient it's gonna start from top and at the bottom is going to be this gray color to do that I'll say to bottom and the first color will be this green color and at the bottom is going to be Gray like that but how I'm gonna delete this background and show it in our text it's really easy I'm gonna be using webkit background clip it's going to be text and webkit text fill color is going to be transparent this is what I wanted let's increase this font size and give style for this button it's going to be 24 pixels only it will be thinner for the button I'm going to give heading cursor will be pointer and background color again our green color I'm gonna delete the Border it's going to be known and for the radius like that I can decrease this button size I'll say maximum content and of course it's going to be white and that's all let's quickly create our about page let's close everything here and open up page and the CSS file we have a container here and inside let's see what we are going to create again we are gonna have two parts this image container and text container in this image container we are going to add this image and this text and in this text container we are going to have two parts again first item second item and those elements let's do that I'm gonna copy this is gonna be image container text container and in this container we are going to have our image I will say fill true that because we are going to be using image container remember and the source will be the external image I will just copy and paste here like that and let's give a class name for this image and after that another do let's say in which text and in this container we are going to have this title let's say H1 and H2 is going to be this text let's say which title and image description well about here we are going to have two items let me copy this and paste inside let's say item and one more and inside the first item we are going to have this title this description of course you can add here any space like that I will give break and their class names title and description it contains all our screen because we didn't give position relative for the image container we are going to fix that but for the other side let's see one more title actually I can copy this and move it into second item like that what we do and this description and a button but if you remember we have used same button here so what we can do we can create a common component and use them here I'm going to open up components button jsx and it's CSS file I'm gonna import this here and use it here and we can take the text and URL as a prop and use it here I'll say link and I can wrap this button actually like that and href will be this URL and the text will be here of course it's not going to be due it's going to be a button and I'm going to open up my home page module CSS and I'm gonna cut this and paste here container so I can use it here but before this text let's give a break and after this P tag I'm gonna call my button and I'm gonna pass here to URL it's gonna be the contact page and the text will be contact it was text or title okay text so I can do the same thing for the home page I'm gonna copy this for the home page actually let's paste it like that and paste this text and it's going to be portfolio let's call our component and delete this by the way as you can see this is how we are using aliases it directly navigates us to the root directory and it looks much better let's see by the way I'm gonna open up the home page as you can see it's exactly the same so let's give Style I can close them let's close this sidebar and actually let's take care of this container and we can see our image I'll save it with 100 percent i300 and don't forget position relative perfect and for this image I will say object fit color that because it looks really weird and color and it's going to cover its parents like that and for the black and white fact we are going to be using filter I'll say filter and grayscale will be a hundred percent like that and for the image text I can use position absolute let's copy this I will say position absolute bottom will be 20 pixels left will be 20 pixels like that two and four on left to any from button and I'm gonna give background color and let's give some padding like that and I can change the color it's going to be white okay and for this text container I'm gonna separate my items to do that remember what we are doing we are going to be using flexbox let me make this bigger display Flags I'm gonna give get between them for each item again Flex one they are going to be exactly the same size like that I can give margin here margin top and for each item I'm gonna give again Gap to do that I'm going to be using Flags Direction column and cap between each item will be 30 pixels like that by the way I can give here more breaks and let's check okay I'm gonna increase this font size let's check what was the name description by the way I didn't give for the other item okay I will say font size 18 will be 300 and I will say text align justify as you can see it looks much better they all end at the same point perfect and what about this contact page it's really easy there is a Title Here and After container display Flags image and this form let's do this quickly I'm gonna close them open up contact page and open up contact module CSS and I'm going to take this here again I'm going to add here a title and I'm going to add a div here which includes our items the first item will be image container and the second one will be R4 actually let's change this it's gonna be form element and in this container I'm going to add my image I'm passing here quickly that because you know how to create this and inside this form I'm going to add an input let's give a placeholder it's going to be name and of course class name is going to be input another one and it's gonna be email and I'm going to add here a text area let's delete them class name and text area and of course a placeholder and that's a message finally I'm gonna add here a button URL will be just empty and the text will be set let's take care of this image container firstly I will say content display Flex cap between them hundreds and align item Center for the image container I will say Flex one because remember this item and this item will be exactly the same size and the second item is form like that and I'm gonna give height for this container that because we have to give height for our image and of course position relative perfect what about this title I can add this here plus size will be bigger I will say margin bottom and text align will be Center like that and finally for this form I'm going to separate my items by giving gap between them for each input and also for the text area I'm going to give some padding I'm going to delete the background color because by default it's white but we are going to be using dark mode and as you can see it's going to be exactly the same color and let's delete this border and this outline for the norm outline known that will give color and I'm gonna change this border it's going to be three pixels solid and this gray color and I can increase this font size it's too small font weight it's going to be bold let's see as you can see there's an animation here and also in our home page there is an animation let's add them for this image where is our image okay I did a create let's say object fits cover as you can see when we cover this container it cuts our image instead I'm gonna use contain perfect and let's give an animation I'll say animation let's give an animation name doesn't matter I will just say move it's going to take three seconds it's going to be infinite and the timing function will be ease and I will say alternate so when the animation ends it's going to make the same movement and let's create this animation using keyframes animation name Chrome I'm going to use transform effects and translate why and let's say 15 pixels basically on the y-axis it's gonna move 15 pixels and it's going to come back like that and it takes three seconds and I want to add something more here I will say two is going to come back to initial position 0 pixels but also I'm gonna increase the scale it's gonna be like that as you can see it's fading perfect and what about this home page as you can see it's easier I'm gonna copy here let's open up our home page here and for the image okay it's here I'm gonna paste my animation it's just gonna be 10 pixels and time pixels I'm gonna delete this let's see okay by the way as you can see again I'm gonna change this object width and it's going to be contain okay it's much better so we created our home page about and contact pages and for now I'm gonna delete those animations not because when I edit this tutorial sometimes I'm increasing the video speed and when I increase the speed or cut the video it's gonna look weird that's the reason at the end of the video I'm gonna give this animation Back okay let's close everything and let's create the portfolio page in the portfolio page let's see we are going to have two titles and three items here and each item has background image and this text here it's really easy let's create I'm going to open up portfolio page and CSS quickly I'm gonna create this title and I will say items of course it's not a global Style I will say styles items and I'm going to create link here next.js link and the first one will be portfolio illustrations and inside I'm going to create a span and it's going to say illustrations let's give class name this link is gonna be item and this spam will be title so let's do the same thing for other items it's gravy websites and applications and I want to show you one more thing here as you can see there's a main title here and if I click in this sub page as you can see it's still here it means it's a layout let's create inside portfolio I will say layout so I'm going to create here H1 tag our works and I'm gonna give class name and I will say style start main title let's import our styles and of course now you'll see children and I'm gonna use right after this H1 attack let's see as you can see it's here let's get a start I will say 100 pixels okay and this title I'm just gonna give margin from top and bottom like that and for each items let's close here let's actually make this display Flex and gap between that and finally for each item I'm gonna give border it's going to be 5 pixels solid and gray I will say about the radius 5 pixels let's give it and height and I will say position relative I'm doing this that because we are going to be using position absolute for these texts let's do that actually I will say title position absolute right 10. bottom 10 now font size will be bigger and font weight will be bold oops not here okay perfect why they are square oh it's gonna be four hearts and for each item I'm gonna be using different background images let's check our public folder as you can see we are going to be using those images to do that I'm gonna be using and child so for the first child I'm gonna say backgrounds I will say URL public folder illustration dot PNG and it's here of course we need object fit here but it's not an image to do that I'm gonna come here and say background size and it's going to be covered but this background is gonna overwrite this to prevent this I will say important and perfect and for the second and third item is going to be website and apps of course second and third okay perfect when I hover over I want to change this text color let's do that and I hover over this item it's going to affect our title and the color will be our green color like that okay it works and when I visit any of those pages let's see what we are gonna have we are going to have a title here and after we are going to create those items but how we are going to choose this category name to do that we are going to be using params property let's open up the ID page sorry category ID is block and then right here arms and let's console look I'm going to open up my terminal and as you can see it says category illustration if I visit websites for example as you can see it's here like that basically we can choose this category to write here our title so I'm going to come here and say H1 tag perms dot category like that okay let's give it a class name and after that we are going to create our items of course we are going to hatch different items for each category but for now for the design purpose we can add exactly the same items for each page so I'm gonna come here and say do it's going to be item and inside we are going to have this image container and this content container I'll copy this first one will be content and the second one will be image container let's create this title this P tag and this button H1 test P tag description remember we have a button component we can use it I will see texts see more and we are not going to have any URL let's leave it like that and for the image let's add here next.js image and of course I'm gonna say fill and true okay we are gonna handle this but before let's give class name image title and description let's open up CSS first one will be category title color will be our main color for item I will say display flex and let's give a gap and I'm going to give margin top 50 pixels and margin bottom 100 pixels foreign for bottom let's take care of this image remember we have an image container Flex will be one I will do the same thing for the content and for the image container height will be 500 and position relative oops there's no semicolon here okay then of course object fits and after that I'm going to give you display Flex Flex Direction column for this item for this content object fits cover and display Flex traction and gap between vendor actually in our example as you can see I used justify content Center like that but in this example as you realize the first item and the second item is different the content is here and the image is here but in this example the image is here and the content is here again we can use and child I'm gonna find the item and I'll see and child and if the child number is even number extraction will be raw reverse let's see of course we are gonna need more items here I'm gonna duplicate as you can see first item second item okay in this example the first item is like that it's going to be odd number foreign like that okay of course it looks weird because we don't have any title or description but then we complete it's gonna look much better by the way I can increase this title and description 50 pixels oops 50. for the description to any pizzas okay so what about this blog page okay as you can see it's really easy again image container content there is nothing different so I don't want to waste your time doing same thing again and again so I will just copy and paste my quote let's close everything here and I'm going to close portfolio contacts and about page and I'm gonna open block yeah I will come here and create a link let's import this uh this image and I'm gonna give here any task ID of course we are going to change it let's add here this image test and description I'm going to add more items and I'm gonna give Style like that and I'm going to open up CSS and past paste my style as you can see it's exactly the same thing but there is something wrong because I said container but we already have container here let's say main container okay perfect and let's open up any blog post here of course I didn't add block here let's change it I'm gonna take them and right here block okay it's here and let's check what we have they are going to have two containers this top and bottom and in the top container we are going to have our content and image container and this description let's do that let's open up ID and CSS and inside container I will just paste my code as I said top container bottom container and inside this bottom we have just this text for the top container we have information deal which includes our title description and the user information this image and this text and for the right side we have image container and the image there is nothing complex if there is something different I'm always coding but we are writing exactly the same thing and I'm gonna paste my code like that okay we created our main design I'm not gonna Design This dashboard right now because we are going to be using authentication here we are going to have login and register operations and we are going to hide this dashboard it can stay like that for now and let's see how we can create dark mode here in our example firstly we are going to create this button we will give this animation and after that we are gonna Implement context API I'm going to come here and I'm going to create a new component let's see dark mode maybe dark mode toggle let's create its files CSS I'm going to give my class name here Styles container and here we will have two icons let's see do again and the first icon will be a moon and the second one will be a sun let's give class name foreign finally I'm gonna create this circle this ball that we can toggle I'll duplicate this actually I can delete here it's going to be only background color and I will say ball let's give a style firstly I'm gonna give a width and height I will give a border one and a half pixels and I will give our green color a little bit darker and I will say pour the radius 30 pixels let's see I'm gonna open up Navar and inside links I'm gonna call my component dark mode toggle okay it's here let's make everything horizontal I will say display Flex justify contents placed between like that let's create the ball by the way I can give some space here it's going to be small space like that of course I should Center them vertically so I will say align item Center okay perfect let's create the ball but first i'm gonna decrease the icon size they are too big okay perfect so let's create ball it's going to be 15 pixels I'm gonna give our main color background color and Border radius will be 50 percent it's going to be a circle and finally I will say position absolute of course if you are using absolute as always you should come here and say position relative because it's the parent and as you can see perfect then I will say cursor pointer so we can click and let's give our animation but I'm not gonna do this in this CSS file I'm gonna give this animation here that because when we change the dark mode we have to take that variable from Context API in our component this toggle component and according to that value we should move this ball let's see as you can see it's on the right and when I click it's light mode right now and it's moving to left side okay let's do that I'm gonna come here and I'm gonna give an inner Style firstly let's write here mode and it's gonna be dark mode for example and I will say if mod is light left will be two pixels if it's dark right will be to pixas I'm giving two pizzas that because we have a space here where is our Style we have a space so if it's dark mode as you can see it's on the right and if it's light mode as you can see it's on the left but how we are gonna take this value to do that we are going to be using react context API I'm going to come here and create a new folder let's say context and I'm going to create team context if you are using context API your component should be client-side component so I will say use client and let's create our context I'll say export post team context create context it comes from react and right now I'm going to create my contacts provider again export const team provider it's gonna be wrapper so we should take here the children prop and we should wrap our application with this provider remember how we are using this layout we are taking the children and robbing that children with this layout provider we will do exactly the same thing but before let's use here use statehook that we can change the mode I'll say const mode set mode new state and at the beginning is going to be a light mode or dark mode whatever you like let's say dark mode and we will be able to set this data to do that I'm going to create a function let's say const toggle and I'm going to set mode I'm gonna take the previous value and I'm gonna write a condition if previous value equals dark it's going to be light if it's light it's going to be dark if you don't know why we are using previous you can watch my react use State video it includes everything you need to know about your state okay right now we can return our provider teamcontacts dot provider and we are going to wrap our children and we are able to send anything to our children to do that we are going to be using value and inside let's send our function and also we can send the mode in this case any children any page or component will be able to use this toggle function or this value so let's wrap our app I'm going to open up layout and outer body I will say team provider like that that's how we are going to change our team I can come here and create here it do and I can give any class name here and it's going to be a global class name it's going to be team and also the mode theme light or Team Dark so let's open up our CSS file Global CSS and here I will say if it's light mode let's take this background and color from here and paste here the background will be white and the color will be this dark color and if it's the dark mode it's going to be dark background and light text colors let's see oh I didn't return here of course we are going to return this provider I'm gonna take this toggle function and use it in my component and when I click here we are going to toggle between our mods let's come here right now we are going to take this mode from Context API to do that we are going to be using use context hook I will say const take the toggle function from use context and team context and of course we are going to need these modes remember we are sending this mode also we are going to use it here and when I click on this container I'm gonna toggle between modes so I'll say one click and toggle in this case this component should be client-side so I'll say use client let's try I will click as you can see perfect but the transition is too sharp I'm going to give an animation this is why I gave here team class name I'll say transition one second all animations and use like that perfect okay awesome it looks really nice and right now let's see how to fetch data using next.js in next.js you can fetch data using both server side and client-side components on the client side you can use traditional methods like user fact react query or SWR in this case your component will be rendered first then it will try to fetch the data and on the server side we will change our components into async components and we will directly fetch the data on the server if your data never changes you can use static fetching and cache the result on the server if your data changes but not too often you can revalidate it in every desired second and if your data changes all the time and you want to fetch the fresh data on every request you can use Dynamic fetching so let's give examples for each situation in our application so let's come here and open up data fetching as you can see in our server-side component we are going to create a get data function and inside this function we are going to fetch our data from an API and if everything is okay we are going to return this Json file if it's not we are just gonna throw an error let's do that I'm going to copy here and let's close everything here and open up blog page here I'm going to come here called get data function and instead of this API we are going to be using Json placeholder for now of course we are going to be using mongodb I'm just showing you how to use data fetching and here let's choose posts as you can see it sends us some fake data let's copy this and paste here so it's going to return us 100 posts and we can use them here let's call this data here I will say async don't forget that and I will say cons data equals oh wait get data function right now let's give here only one link and I'm gonna delete the others like that I'll say map and for each item inside return this link there's a warning that because we don't have any key unique key and in our API as you can see there is a unique key this ID we can use it key equals icon dot ID right now instead of this title we can use this post title so I'll say item dot title let's see all items are here this is how we've hatched data and by default let's check here this fetch function fetches our data and forces to Cache it means next.js is caching our data and when we make requests it returns that cache data and it's called Static data patching and if you re-validate your data you can use this next.js function I will come here by the way I can delete here here and I'm gonna paste it right after API fetching and it's going to revalidate our data in every 10 seconds cash lifetime is 10 seconds and if your data is changing all the time you can use no cache as you can see like that it's gonna hatch in every request so let's leave it like that and let's do the same thing for the single post yeah I'm gonna fetch data according to our post ID but how we are going to take this ID here we have already seen that we are going to be using params let's copy this data get data function and open up ID I'm going to paste it here but we are gonna need here our post ID let's check if I say posts one for example it's just gonna fetch this post so we are going to need our ID I will say params remember in this params there is an ID that because our slack name is ID and I will save const data to wait of course it should be async function I'll say get data and I'm going to pass here params.id and I'm going to take this ID here and I'm just gonna add it here ID of course I should use backtick I'm using JavaScript inside and let's see I'm going to take this data and I will change this title data.title and of course we are sending correctly we don't have to structure this I'm gonna take this like that let's see and as you can see there's an error that because we don't have post with this ID but if I write one as you can see it's here but instead of this error if you want to you can create here error.js or if you want to you can return not found page to do that I will say return not phones and it comes from next.js navigation as you can see not found that if I change here let's say 12 as you can see perfect it works like that right now we know how to fetch data in the server side Dynamic and static but now we are going to fetch data in the client site let's open up dashboard for example and here I'm gonna do exactly the same thing I will fetch this data what we are doing remember we are writing here a use State columns data set data and we are using use statework and at the beginning let's give an empty array and remember our baseboard is a client-side component use client and I can use here use effect and let's create our function const get data it's going to be an async function and I'm going to call this response if there is no response we can add here one more real State and we can say error set error at the beginning is going to be false and we can set it here by the way we are going to need is looting variable and when we try to fetch data it's going to be true foreign if everything is okay we are going to set this data and we are going to set is loading to force it's going to be response Dot Json now finally we are going to call this function here and let's see our data I'm going to open up there's our app here let's open the console okay it's still pending there is something wrong of course it's an async operation also I'll say close data it's going to be a weight response Json so I'm gonna pass here data and as you can see our data is here okay you can fetch your data using use effects but I don't recommend using use effect anymore instead you can use something like react query because those kind of libraries come with error and is loading out of the box and also you will be able to mutate your data so instead of use effect I'm just gonna comment this out like that we are going to be using next.js SWR hook let's come here SWR there's a use effect function we have created something like that and as you can see this library is highly recommended because you are able to Cache your data or make a revalidation let's copy this Library I'm going to open up terminal npm install or yarn at SWR and when we use this hook it returns us error data and also it returns is looting it's not here but let's open up this documentation actually okay as you can see data error is loading and what's this fetcher basically you can use any library or JavaScript fetch tool with to give your data in this example as you can see it uses the fetch function and after the response it takes that response and returns to Json data so we can do the same thing here I'm gonna take this fetcher and our function let's paste our URL here that was the URL just copy and paste and let's see I'm going to open my app of course I didn't import let's import here I'm going to open my console and as you can see it's here and this is how we are going to fetch our data in the client side then we create this dashboard you will see how to add or delete data but before I want to show you how to fetch local data for different galleries let's close everything here and open up portfolio and inside category I'm gonna create a new file and let's say data.js and inside this file I'm just gonna paste my items for application illustrations and websites we are going to have nine items here and using this file we are gonna fetch our gallery items let's shrink this and close here I will do exactly the same thing here let's say get data we are going to take the category and I'm gonna fetch our data from data.js and I'm gonna just filter these items so that's it for data items and category oops not item items and if there is a data return this data if there is no return not found from next navigation let's take this data I will say const get data and I'm gonna pass here params.category because our folder name is category so let's take this data right now and I'm gonna delete those items I'm just gonna leave the first one like that and I'm gonna use a map data dot map and for each item inside our gallery items I'm gonna return this div of course we need a key item dot ID let's check okay ID title description and image let's write them here item dot title description and image let's see I'm gonna click there's something wrong okay it's not IMG it's image and perfect if I write here something else instead of illustration website or application as you can see not found it's that easy guys before app router it was a little bit complex but right now it's really easy just create your get data function and fetch your data using an API or local file right now instead of any local file or external API we are going to be creating our own API so let's open up cloud.mongodb.com and after the authentication you are going to see this page let's create a new project I will say la model I will create a project and I'm gonna build a database let's choose this free option you can choose any provider or region let's leave it like that and I will create oh I hate this okay it was easy one so right now I'm gonna create a username and a password I will say namadev and password will be again no matter of course after this tutorial I'm gonna delete this cluster create new user we are going to be using mogodb Cloud so I will choose this one and you can add here your IP address but for the test purpose I'm gonna add zero and it's gonna allow anyone to reach our database of course if they know the username and password it's just for the test purpose after deploying your application you can add here your server IP address and I will add and finish and close and during this process let's come here and add one more library and it's going to be Mongoose let's say yarn add mongoose okay basically this Library allows us to create our mongodb models and create crude operations what I'm gonna do is come in here and creating an emu file this file is really important because we are going to hide our secret Keys here like our mongodb URL okay it's here right now I'm going to choose connect and I'll say drivers and as you can see this is our secret URL I will copy and I will say equals this URL and you can write here any database name let's say test and here I'm going to change this password remember it was La model and we are ready to use this URL let's close here and if you remember I've created utils folder here and inside let's say db.js and using Mongoose we are gonna try to connect to mongodb I will say import mongoose and let's see how we are going to use it I will say read to talks let's choose here connection and as you can see this is how we connect to rtb but I'm going to be using try catch methods let's see error handling as you can see we can use try catch if there is an error we can warn the user let's copy this I'll say const connect is going to be an async function because we are making a connection and I will paste here and instead of this URL I'm gonna pass my own URL it's inside my EMV file to call this I'm going to use process eme and remember what was the name just and if everything is okay it's going to connect if there is something wrong we can maybe throw error and connection failed and finally I'm gonna set this connect method by the way if I remember correctly Mongoose is using version 7. actually I want to use this version that because there might be some errors while using the version 7 so I'm gonna open up my package Json and I'm Gonna Change here let's open up terminal and I will say npm install or just yarn and it's going to install Mongoose version 6. that because I've tried version 7 and there was some errors and to prevent those arrows you have to write a lot of configuration but just use this table version everything will be easier and okay our connection is ready right now we can create our models let's create new folder and we are going to have the user model and post model so let's create our mongodb schema again Mongoose and I will say const schema is going to come from mongoose copy this here and I will say const user schema new schema and inside let's see what we are going to have firstly user is going to have a name and its type will be string it's going to be unique every user has different username so it's going to be true and it's going to be required because we cannot create any user without username and what else we are going to have an email again string unique and required and we are going to have a password it's going to be string required but it doesn't have to be unique and one more thing here I'm gonna create timestamps basically when we create any User it's going to create created at an update it at time let's export this schema export defaults we are going to create Mongoose model and the model name will be user and we are gonna pass this schema basically it's going to create a user collection in our database there's a collection here of course it's empty right now and then we create our DB remember the database name is test and in this test database we are going to have user collection so I'm gonna copy here and paste for posts it's going to be post schema like that and a post is going to have let's see title this short description username image and the contact let's create title string unique and required actually I can right here and let's see description image content and username okay so let's see how we can create our own API to do that I'm going to open up app directory and I will create API folder and again we are going to do exactly the same thing we are going to write our endpoints using folder structure like posts for example and this is going to be our endpoint basically when we use localhost 3000 API and posts it's going to open up this endpoint and it's going to take get post update or delete requests to do that I'm gonna create here from JS it's really important this name should be route.js just like page.js don't change it and I'm gonna write a get request for example I'll say export const cat we are going to get a request from user of course it's going to be an async function and we are going to fetch data from mongodb and if everything is okay we are gonna return a response I'll say return new next response and we can send anything it works and let's say potatoes 200 or whatever you want to return I prefer using it like that our data and its status by the way it comes from Nike server like that and let's try API posts I will say and as you can see the answer is here this is how we create our API right now let's connect to rdb I'll say import connect from DB remember we have created here we are going to connect to our DB let's say try catch block if there is an error we are gonna send a response but this time it's going to be an error let's move this here actually and I will say database error let's say 500. of course we are not going to handle every single error here and I will say a way to connect and after the connection finally we can fetch all posts from DB I'll say const posts again await post model by the way I will say find and it's gonna fetch all posts I'm not going to write here any condition and after that if everything is okay we are gonna return our response and it's gonna be the posts and status to hearts of course if I refresh it's not going to return anything by the way our models is not in our source folder and context also let's open up our layout there is a problem here it's going to be at of course everything should be in Source folder except of this public folder this is how we are using at and let's try as you can see it's empty that because we don't have any post yet and then I refresh the page as you can see it created this test database I will zoom in and we have post collection and it's empty let's add some documents to see better I'll say title test another one description image and content and finally username okay I will insert it's here let's try again I will refresh and as you can see it's here so we can use this API in our blog page right now let's open up block pages and I'm going to change this URL it's gonna be localhost 3000 API and posts let's see I will say block as you can see there is an error here that because we didn't stingify our posts in our API remember we are taking response Json here so we have to send stringified version of this post I will say Json stringify and posts and it's here let's change here we are going to be using data image and I'm going to open up my post model I'm not sure if it's image okay I said IMG let's change this description by the way it's not data it's item finally I'm going to change this URL and it's going to be item dot underscore ID because in the mongodb as you can see our ID is this ID check I will refresh I will click as you can see our ID is here right now we are going to patch this single post let's do that I will copy here and paste here like that again we are going to be using posts endpoint but additionally we are going to send these params this ID let's come here this is our API posts and insights again I will say ID and route.js let's copy here and paste but this time we are gonna need our ID to do that we are going to take params and inside these params remember we have ID equals params and using this ID we can search post by ID so I'll say find by ID and I'm gonna pass this ID and if everything is okay it's gonna return this post let's see I'm gonna refresh but of course it's going to be block there is something wrong here okay it's gonna be blocked and it's ID let's add here block and as you can see it's here let's change our items here I'm gonna take this data we already have this title I'm going to change here it's going to be description image username post image and content let's see I'll refresh as you can see they are here and this image but if I change here as you can see not found it works as we expected right now I want to show one more thing here when we've had any data as you can see the title is still the same we are using same title for each page as you can see it's not changing so what I want to do is change the page title and description for each page doing this is really easy using next.js let's open up our application I will close everything here and let's check our layout and as you can see we can use any metadata using this function I will change my application title it's going to be another and the description this is the description Nazi as you can see it has changed I'm gonna inspect my page inside hat we have our links CSS files and JavaScript chunks and as you can see the title of the page is namadev and the description is this is the description it's really awesome because you can change your title and description on the server side and this is why next.js is so strong when it comes to SEO and also when we fetch any data we will be able to change this title according to our post because we are fetching our post on the server side it's not possible with react let's see how we can change metadata let's open up for example contact page only thing I should do is come here and change the data let's say contact this is contact page let's see it's about page and it's the contact page perfect but now we are going to change the title of single blog posts let's come here and search for generate metadata as you can see we can create static metadata or dynamic let's copy this and open up block and ID and I will paste it here using these params and the post ID we are going to fetch our data from stored ID let's say post and it's going to be post title and the description will be post description of course it's going to be a weight is an async function I will refresh and as you can see test one let's inspect and our description is here awesome it's that easy guys just use metadata for static pages and use generate metadata for dynamic pages so let's see how we can authenticate users to do that we are going to be using next auth library and the newest version of that library is auth.js let's open up authjs.dev as you can see this is the new version and let's see how we are going to use it I will choose setup and we are going to be using next.js version let's install this Library npm install or yard at next auth and after that as you can see we are going to need an endpoint auth endpoint let's create I'm going to close everything here an inside API I will say auth and inside this folder we are gonna distract you next of endpoint that's because these Library handles different kind of endpoints like API alt and sign in and sign out and for example session and what else let's actually check on documentation as you can see sign in alt sign out session providers tokens so we don't have to create all those endpoints this Library handles them using this folder of course you can create your own endpoints also like register because I want to use different endpoint for creating users and let's see how we are going to handle our route.js let's create now.js and let's come here I'm gonna copy this and paste here and as you can see we can give here any authentication provider it can be Google provider GitHub provider or if you want to you can create your own custom provider but before let's try using GitHub or Google provider I'm going to change here like that and we are gonna need client ID and client secret to do that we are going to be using Google Cloud functions let's open up cloud.google.com I'm going to open up console let's choose API and services I'm going to choose credentials as you can see I've created in 2021 I will just plate it and create new one let's create credentials client ID let's choose web application and let's give it a name or test or whatever you want and here I'm gonna add my localhost and for the redirect URL I'm going to be using API alt endpoint and callback and Google let's create as you can see we have an client ID and secret so I'm going to use them in my emu file let's open up yeah me I will say client ID Google client ID and Google client secrets I look up here okay let's use them here Google client ID and Secret and let's come back here after creating our provider we should create a secret key that because this library takes this secret key and encrypt our tokens or other stuff so you have to use it in your eme file also and you can create here any secret key really doesn't matter if you want to you can create just random key using your terminal but anyway and after that finally we are gonna wrap our application with session provider let's open up layout here after team provider let's import this first I'm gonna rock my container like that if I do that let's see as you can see there is an error that because session is using context API under the hood and as I said we can not use contacts API in server components we have to write here use client but in that case you will not be able to use this metadata to prevent this problem we can create a new component let's say auth provider dot jsx let's create our function and I'm gonna use this session provider here let's import and I'm gonna take the children here and drop here right now we can use this provider instead of this session itself like that I can delete here let's see it's still the same because I forgot writing here use client and perfect but how we are going to use that session in our application let's open up the documentation as you can see there is a use session hook here we are going to be using this hook and after that we will be able to reach the status it's gonna be loading authenticated or unauthenticated and we will be able to reach this user data of course we are going to be using this hook for only client-side components let's open up our dashboard actually I'm going to delete this use effect or maybe you will need that I will say const session and use session hook let's import and let's see what's inside let's see I'm gonna open my console and there's an error here let's check okay not because we haven't created our URL in the EMV file I said this script is necessary but also we have to create here our url localhost url of course when you deploy your application you should change here this is why it's important let's check again I will refresh the page and there is one more mistake here that because we are using App router remember how we are doing we are taking cat or post methods and we are returning those methods so what I'm going to do is writing here const Handler and I'm gonna export this Handler as get or post methods as get and post I'm doing this that because when we pass our username and password it's going to be a post method and then we fetch our session our user information is going to be a cat method in any case we are going to send this Handler let's see I'm going to open up dashboard and my console and as you can see there's an object here by the way I forgot deleting this data it's not important this is our session as you can see we are not authenticated yet in this case we don't have any user data so let's create a login page and try to log in with Google if you remember we already have here the login page let's open up and in this container I'm going to create a button and I will say login with Google and again it's going to be use clients when I click on this button I'm gonna call next alt sign name function I will say on click methods sign in as you can see it comes from next art and I'm gonna pass here my provider name and it's going to be as you can see Google I will save and let's try I will say dashboard and login I will click as you can see it opens the Google page when I click and let's get back to the dashboard and right now we are authenticated let's actually delete this data okay at the beginning as you can see status is loading and after authenticated and if we check the data there is an expiration date of our token and the user information it's that easy guys and there are tons of providers like GitHub Google Twitter Facebook Instagram just check this documentation and use whatever you want but when it comes to using user credentials it's going to be a little bit harder that because we have to handle user email and password but before that let's try to create a new user I will say register and I'm going to create a form here and using our API endpoint we are going to create a new user and after that we are going to handle the login process using next auth I'm going to close everything and I will open up register page I will say use client and inside this container I'm going to create a form and let's create our first input I will save placeholder and username let's give class name two more it's gonna be email and password let's change type it's going to be email and password of course they are going to be required like that so we have to enter any username email and password and after that I'm gonna create here a button and that's a register let's give a class name button and after this form I can create a link here and I will say login with an existing account let's import from next link and href is going to be login page dashboard and login let's see okay they are here let's give quickly some Style I'm going to Center everything align item Center just right contact center and for the form I will say 300 pixels and again display flex but it's going to be column it's going to be vertical and gap between each item will be 20 pixels of course I forgot this link here they are going to be horizontal like that to prevent this let's say Flex Direction color and I can give Gap like that for those inputs let's give quickly padding I'm gonna delete background color it's going to be transparent because we are using dark mode and Porter will be two pixels solid and Gray for the radius font size and font weight will be bought like that and for this button we have already created before I will do exactly the same thing this background color color will be white and it's going to be something like that in the future we are going to be using nextges actions but they are not stable yet it's going to be stable maybe next year maybe later it's not production ready so we are going to be using client-side methods so I'm gonna come here and say on submit methods and let's say handle subject let's create this function I'm going to close here I'll say const handle submit event prevent default and we have three inputs here if you want to you can create here username email and password to statehook and then you change those inputs you can set those States but I prefer using form elements what I mean by that I will say const name I will say event Target and the first Target of this form and its value basically this event represents this form and the first Target of this form is the first input and if I say take the value of this first input it's going to give us the name which we write here by the way I didn't change its color okay so I can do the same thing for others it's going to be email and password finally I'm gonna send this to our endpoint I will say async let's say try catch block if there's an error we can create here closed error set error and use statehook at the beginning it's going to be false if there's an error it's going to be true oops set okay and if there's an error we can show it here after this form for example if there's an error right here something Metro or you can show the error message whatever you want and after that I will say response await fetch method and we are going to be using our API auth and register endpoint remember I've created here endpoint we are going to be using this let's create raw.js and this method is going to be a post method because we are sending our information I will write here headers we are sending Json so content type is going to be application and Json and finally we are going to be sending body and inside this body Json Dot stringify name email and password okay we are sending our information to register endpoint it returns us a response if this response dot status equals to 101 which means successfully created we are gonna redirect our user to login page to do that we are going to be using use router hook let's come here and say const rather use router it comes from next navigation be careful here don't use next Rudder because it was the previous version and I'm gonna choose this and push methods dashboard and login page and we can give here any query let's say success and we can write here our message for example account has been created and in the login page we can take this success message and show it to our user okay let's open up our route let's create a post request I will say export const async function we are going to be connected to DB and we are going to take the user request and inside this request there is a body and inside that body we have user information that's it const name email and password is going to come from requests and Json and after that let's connect to the mongodb I will say await connect let's right here try catch method and if there is something wrong we are going to send this response we are going to take the error message and send it to user with this status code okay so how we are going to create a new user using those credentials it's really easy I will say const new user new user model and we are gonna pass here our email name and password but there is something important here we are going to enter a play text but we shouldn't store this in our database directly we have to Hash this password before to do that we are going to be using big crypt.js Library I'm going to come here and say yarn at decrypt.js okay let's import this here using this function we are going to encrypt our password so I will say const hashed password await decrypt and hash function we are going to pass here our password and we are going to send here salt length you can give any number here doesn't matter and in this new user I'm gonna send my username email but the password will be hashed password okay let's save this user in the mongodb I will say oh wait new user and save methods and if everything is okay we are going to send a response and the status will be 201 and the message will be user has been created let's import this don't forget that let's try I hope everything is okay test test gmail.com I will register and as you can see we are in the success page of course there is a chrome warning because my password is from one to six okay perfect it works let's check here as you can see there is a user's collection if I refresh and our user is here but what's this email oh of course it's going to be first item second and third let's delete this let's get back okay it's successful and let's check again uh perfect okay right now we know how to create new user let's see how we can sign in using next auth let's open up R and point here next out and route and after this Google provider I'm gonna add one more provider and it's going to be a credentials provider let's import this by the way next up is not recommending using password and email they try to encourage you to use any social authentication or magic email link but anyway I know most of you want to sign in using email and password and I will show you how to do that in this provider you can give any ID or any name let's give credentials and after taking our user credentials we have to authorize them I will say async function authorize and we are going to take the user credentials email and password and we are going to check if the user exists in rdb or not to do that we have to connect to mongodb first I'll say await connect here and after that I will say try catch if there is an error we are going to throw this error let's say new error and I'm going to pass in my error and here let's check if the user exists or not now save const user equal to user model and find one method because our user is unique we can find it using its email so I will say email equals credentials email basically it comes from our user from the client side here we are going to create a form here it's going to take the email and password and it's going to compare the email in the database if there is a user like that we are going to compare its password I'll say if there's a user check password if there is no user we can throw another error and let's say user not found so I will say const is password correct remember we are using decrypt.js let's import and I'll say await decrypt and compare methods and we are going to pass here credentials and passwords and we are going to compare this with user password this user in the DB and again another condition here if password is correct we are going to return this user if it's not another error and this time it's going to be wrong credentials let's open up login page if you remember we are using Google provider id here and this time we are going to be using this ID and after sending our email and password it's going to connect to the DB and try to find the user if there is no User it's going to send this error if password is not correct it's going to send this error and if everything is okay it's going to return our user let's actually create exactly the same form here I will copy here and paste and the same CSS here let's copy them and paste here but this time it's gonna be login and let's create this handle submit I will copy here and let's delete them actually we are going to be using only this sign in function but before I need my email and password remember how we are doing this event Target and the first item and its value and I will do the same thing for password and finally we are going to be using credentials and we are going to send our email and password let's see of course we don't need this username I'm going to delete that we need only email and password let's try test gmail.com my passwords I will log in and as you can see it returns an error actually I can set this error into a login page so we don't have to leave the page to do that I'm going to open up next authentication and after providers I'm going to say pages and the error page will be dashboard and login if there is an error it's going to show it here let's try one more time as you can see error is here let's see what's wrong I forgot writing await it's fetching user but it's not returning let's try one more time and there is no error let's check I will go to the dashboard and as you can see it's authenticated and we have the user and if you have anything wrong you can find the code in the GitHub repository it's going to be in the description and this is how we are creating authentication using next.js so right now let's see how we can protect our route but before I'm gonna add Here sign out functionality I will close everything and open up Nail Bar and instead of this console log I will say sign out function from next auth let's see I will open up my console and log out and as you can see looting and after unauthenticated perfect so what I want to do is using use session hook here and if it's not authenticated we shouldn't see this button I will say use session I will import and I will come here and write a condition I will say if session and status equals authenticated show this button as you can see it's not here anymore right now we are in the dashboard but we are not authenticated it means we are not supposed to see this dashboard page let's open up dashboard and protect our route again I'm gonna be using use router hook from next navigation and I'm gonna write here a condition if status session status including return P tag and loading of course you can give here any skeleton or progress bar that you can stay like that another condition I'll say if it's unauthenticated I'm gonna be using rather push method and we are going to be redirected to login page dashboard and login and if it's authenticated finally we will return our dashboard like that by the way we are using return statement here it means we cannot use fetching methods it should be on top like that okay let's see as you can see we are here I'm clicking and we are not able to see dashboard it's that easy and if we are authenticated by the way I can do the same thing for login page if it's authenticated we shouldn't see this page let's do that actually that will open up login page I will say const session use session hoop I will just write my conditions give session status is loading it's gonna show the Looting if it's authenticated we are going to be redirected to dashboard let's import router also like that let's see as you can see right now we are in the dashboard if I try to visit login page it redirects me to the dashboard this is how we are protecting our routes let's log out as you can see login page let's login and dashboard perfect so let's create our dashboard page on the left side we are going to fetch our own posts and on the right side we are going to create a form that we can add any post let's close everything again and open up dashboard as you remember we are fetching these posts but this time we are going to fetch our own posts I will say API posts and I'm gonna pass here my username I'll say username equals I'm gonna be using backtick and session Theta user and its name let's see I will say console log data okay it works but it's not what I expected because it returns all the data I'm going to open up my API posts here and I'm gonna try to reach this username to do that we are going to be using request URL I'll say const URL new URL and I'm gonna pass here request.url and using this URL I'm able to reach to username I'll say const username URL dot search prompts and we are gonna get username basically it's going to take all the query and search for username and the username is our session user and its name so using this username I can write here a condition I'll say if there's a username search for that username if there is no just fetch all the data let's see as you can see it's empty but if I visit the public page this post is still here it means it doesn't belong us so let's create our own post let's come back and firstly I'm going to create a view we are going to have a post section and form section I'll see Styles posts and let's say new and it's going to be F4 and here we are going to see our posts let's say one more div is going to be image container inside I'm going to create an image and ALT and after this image container we are going to have a title let's say H2 is going to be post title let's give class name and finally I'm gonna create a button here like this and we will be able to delete this post let's say class name and it's going to be delete okay right now I can map through this data and call this post I'll see data map for each item or let's say each post call those items of course we need a parent let's say post like that and I'm gonna give a key it's going to be a post ID let's say post image post title for this new section I'll say add knee post I'm going to add an input it's going to be title placeholder title and that's a class name input another one description mutual and finally contact but it's going to be text area because it's going to be a really long post so let's say text area and I'll say placeholder content and class name will be text area and finally let's create a button and I will say send and then we send this post I will say on submit and handle supplement async function current default because I don't want to refresh the page and after that I'm gonna take my items remember how we are doing this like that and I will write a try catch block console log this error or you can create error use State and I will say wait hatch my API endpoint posts and I'm gonna write here my configuration firstly it's going to be a post method we are going to send a body remember we have to write here Json stringify and I'm going to pass the title description image content and for username session data user name okay let's open up our route and right now I'm going to create one more right here and it's going to be a post method let's come here and take the body I will say request and Json and remember how we are doing this we have already done for the user it's really easy const new post new post model and I'm just gonna pass this body and inside this try catch block I will say oh wait knee post and Save finally I'm gonna pass here a message post has been created 201 successfully created and let's try I will write if there is data also we can use this is loading here I'll say if it's loading right here booting if it's not show this data I didn't use Styles here okay as you can see we don't have any data yet and let's try of course I'm gonna give some style but for now test from client let's write actually exactly the same thing and I'm gonna paste here an image let's send and when I refresh the page it shows this error that because we didn't add any width and height for image let's say 200 right 100 and it's here okay it works let's give a style and we can see better I'm going to open up my style here firstly I'm gonna say display flex and gap between them will be 100 pixels and the posts container Flex one and we have one more container here and it's the form sorry new like that and for the Post single post I'll say display Flags align item Center and justify content space between like that when we add another item here I want to give a space between them so I will say margin 50 pixels from top and bottom Zero from left and right for image I will say object fit cover for the image container let's say 200 position relative like that and for this delete button I'll just say cursor pointer and the color will be red like that and what about here I will say display Flex leg extraction column and Gap and for input and text area heading will be 10 I'm going to delete the background color it's going to be transparent let's give a border two pixels solid and gray BBB and for the radius three pixels like that and I write something here I want to change its color again and also I'm gonna increase the font size and font weight okay for this button I'm not gonna write it again I will just paste it like this perfect but there is a problem here when we add any post we have to refresh the page let's close here by the way I can take here rotate function and then we add any data we can revalidate our data so I will come here if it's successful mutate let's try I'm gonna paste this link everywhere that sent and as you can see it's immediately here we don't have to refresh the page and I can do the same thing when we delete our posts let's create that functionality and API endpoint let's create this endpoint first of course we are going to be using ID route that because we need the post ID let's duplicate this and it's going to be a delayed method we are going to take this ID and find by ID and late and we are going to pass this ID it's gonna delete this post now finally we are going to send a message post has been deleted okay let's use this endpoint I'm gonna come here and create on click function handle plate and of course we are going to pass the post ID so it should be an arrow function like that and I will say post dot ID let's create this function and I'll delete async post ID and I will say try catch and I will say wait patch function and the endpoint API posts and I'm going to pass this ID like that and let's write our methods is going to be late method and if everything is okay we are going to mutate our data let's see I will click and it's gone let's add back let's delete this perfect it works and if you want to reset your inputs after adding new post you can come here and say event Target and reset I will add as you can see it's empty perfect okay guys we have completed our application home page portfolio we are fetching all these data from local file we are fetching data from our database like that single post about and contact page dashboard we can add or delete posts we can log out login or register by the way I didn't give here a style but don't worry just check the report story it's in the description and we have dark mode light modes and I think it was a great project to learn next.js I hope you'll enjoyed if you learned something new today please like the video don't forget to follow lamadev's social media accounts and if you want to support nomadev you can use the link in the description below or you can join the channel and let me know what kind of projects you like to see in the next tutorial I hope I will see you in the next video goodbye

Channel: Lama Dev

Views: 68,602

Keywords: next, next.js, learn next.js, next.js tutorial, next.js course, next.js app, next.js app router, next.js 13, next.js mongodb, next.js full stack app, next.js for beginners, react, react next.js, next.js api, next.js ssr, next.js csr, next.js swr, next.js rendering, next.js optimization, next.js application, next.js auth, auth.js, next.js seo, mongodb, mongoose, lama dev

Id: VE8BkImUciY

Length: 185min 46sec (11146 seconds)

Published: Wed May 31 2023