Watch these 205 minutes if you want to learn Next.js..

whether you are feeling totally lost with next.js or have been already building something with it this video is for you because to this video I have gathered a compilation of some of my most informative and Hands-On tutorials from my Nexus 13 series we will explore topics like basics of app router authentication with next auth and the app router Router Basics and advanced usage adding internet analyzation using both server and client components and also a complete tutorial on how to build a to-do list application using Nexus 13 and the app router these are just some of the topics and you can see the video description for the full list of things covered in this video but before we start if you haven't already please hit the Subscribe button below and without further Ado let's get started I hope you enjoy with the app directory we can improve the routing in our next JS applications and we can use easily things like server components or layouts for example in this video I want to show you how you can use the new app folder and the new routing and how things like layouts and server components work so let's dive in so right here I have a fresh next AS application open and as we can see it uses the next js13 version so let's start by opening up the application in our localhost and just see that it runs looks like everything is okay so let's hope to the vs code and see the folder structure so up until now every page has been defined inside of this Pages folder but with the Nexus 13 we can now create a new folder called app and we can place our Pages inside of this folder so let's try it out so in the app folder I will just create a new file called page.js and inside of it I will export a react component like this then save it and switch to the browser and refresh the page and nothing happens so let's try to actually boot the server the dev server okay and right here we get a warning saying that the app there is experimental so one thing I didn't mention is that at the moment it's still experimental and in beta so this is why we need to add this experimental app the app tier true to the next JS config so let's do that I'll open up the config and paste it in over here like this then I'll put my server and looks like we got some errors saying that there is conflicting app and page file so right now the Home Route is pointing to this page and this Pages index.js file so let's get rid of this one so it should hit this page.js file so I remove that and I'll reboot my server okay and we got a message that the app page did not have root layout so next has created one for us so it created this layout.js file let's look into that in just a second but before that let's hope to the browser and see if everything works and looks like it does we get the hello text over here okay so our page.js is working so what is this layout.js so with the new app folder we need to have this root layout inside of the app folder and what this does is this basically replaces the app.js and document.js files so as you can see right here we have the HTML tags head and body and then we render the children inside of the body so every application should have inside of the app folder this root layout so let's add a navigation inside of this layout file just to see how it works so I'll add some navigation code over here like this so I added two links home and posts inside of the nav bar so let's save it and switch the browser and we can see we have home and posts over here so if we click home it opens up different page and with the posts it opens at the slash posts page and we don't have it yet so let's create that one so in the app folder I will now create a new file inside of posts folder called page.js so with this new routing the segments in the URL so for example here the posts will no longer come from a file name but rather from the folder names and it's like folder should have a page file inside of it and that's the file that will be rendered from that route so now inside of this page file I'll just export a function like this and save it switch back to the browser and we can see we have the post page over here so home goes to the home and post go to the Post let's change the home page text just to home page like this so over here now great now you can see when we click the links the page is refreshing and that's probably not what we want so we can replace these links with the next as link component so let's do that next I'll go to the layout and replace these a elements with the next JS links like this let's save it switch to the browser and now if I click the posts I can see the page is not refreshing and only the content down here is refreshed so this nav bar is coming from the layout and when we switch between the pages even though the URL over here changes this part here won't re-render because it's defined in the layout and over here the children is changing So based on the route we are rendering either the home page over here or the post page over here and one new thing with the app folder is that we no longer need a separate like components folder but we can add the components that we need inside of the app folder right where we need them so for example we could move this navbar to its own component and just use it inside of this layout.js so let's do that so I'll add nav bar and let's import it so import nav bar from and I will edit the same folder so let's import it from there like this then let's create the file or the component just like this and then export a function and then paste in the nav bar and let's save it and we still need to import the link like this so let's save it and we import it in in the layout we can get rid of that save it and switch the browser and refresh the page and looks like our page is working so as said we can place the components that we need inside the app folder too so next let's see how we can display some posts in the posts page so over here we want to download some posts from an API and display the titles for those so let's start by adding a function that loads the posts and for this I will use a dummy API that returns just some random posts and I will call that API with fetch like this and then I will return post.json like this and now comes the interesting part because normally in this situation we would use something like get server side props or get static props but with next test 13 and the latest react version we can now import something called use from react so let's do that like this and if you have heard about react suspense well this use over here as far as I understood it is exactly that so we can use this to fetch our data inside of our component so how that works is let's go to our component and let's Define a variable called posts and then call the use and give the get posts function as a parameter just like this and let's log this like this save it and switch to the browser and go to the Post space let's actually open the console first so let's open the post page and in the browser console we can't see anything but if we switch back to the vs code we can see that right here we have some posts locked so looks like the request is working but one thing you might be wondering is that why is this console log showing inside of the servers terminal or server console instead of the browser console over here and the answer for that is that this component is now running as a server component and inside of the app folder all components are by default server component so this right here also is a server component and that's why it's logging the results inside of the server console so now that we get our posts let's just Loop through them and display the titles like this so I'll just display them as a list and one thing I added was a curly prices over here because it looked like the posts were coming as a post variable from the API but let's say this ends with the browser and inside of the post page we can see we have three post titles over here as expected so if we go to the home we see the home page and inside the posts we see the post titles one thing we should add over here is a loading indicator and with this new app folder structure we can do it pretty easily so let's switch to the vs code and inside of the app folder I will create a new file called loading and inside of here I just return a function and from that function I will just return text loading like this so let's save this and go to the browser let's refresh the page so now we are at the home page and now when we click the post page it will trigger the API request and load the posts and that will take a little time so we should see a loading indicator over here so let's try it out as you can see it displayed the component that we defined inside of the loading.js so this is all thanks to this new app folder structure plus the new feature used from react so this use automatically lets the other components know that hey we are loading data so we can that way display the loading indicator at least that's how I understood it and that's how it seems to be working so if I'm wrong please do correct me in the comments but as far as I know that's how it works so that easily we could add a loading indicator over there next let's try to do it so that when we click one of these titles it will display that posts details so it will load the post from the API and display the details for that in order to do that let's add a link component over here like this so what I did was add an Access Link component and the href is slash posts slash the post ID and I'm missing P from there like this so we will use the post ID to identify which post we want to load so let's save this and switch the browser and inside of here let's refresh the page and now if we click one of the blog posts we get 404 but the URL points to the posts slash the posts ID so that's good so next let's create this page over here so in order to do that we need to add a new folder and because we are using Dynamic routes right now we want to name this folder like this and inside of that folder we will create a new file called page.js and inside of the page we will again return a function and inside of this page we can catch the ID from the page params so let ID equals params.id like this and let's just for now return a div displaying that ID like this so our page is ready let's switch the browser and right here we can see it displays the number over here and if we click some other post it will display that posts ID over here great but what we actually want is to display that post under these titles so let's up to the code and in order to accomplish that we now need to define a new layout so inside of this posts folder we want to define a layout that has these titles and then has the blog post details displaying under here so what we can do is actually just take these page.js inside of the post folder and rename it as layout and I will rename it over here also and every layout gets the children as props and it should also render those children so let's add it over here like this so now if we save it switch to the browser we get 404 for the Post page and that's actually because right now we only have the layout file inside of the post folder so what we still need is a page file inside of the posts folder so let's add that and Export a component from it like this let's save it and now if I switch the browser we get the select a post text that we defined in the page.js and now if we click one of these titles it will display that ID under here so our layout over here is now working and the only thing to left to do is to actually display the blog post details inside of the ID and page.js so over here so let's do that next and we can do it the same way we did it earlier by importing the use from react and then defining the function that fetches the data from the API and the API URL so it's the domination.com post slash then the ID of that post that we want to get the data for so then just return post.json like this and inside of here we can Define the post variable and then use the use and pass in the get post and the ID as a parameter like this and let's modify the return statement to display the title and body of that blog post like this then I'll save it switch to the browser let's see what happens so we are getting an error and looks like we are missing s from the URL so I think that was it so let's save it switch to the browser and yeah now it's working so if we go to the home page and then do the post space we get the text select the post and when we select one it will load that posts data under here and we can see different posts in there too like this so right here also this top part over here is using that layout that we defined and only this part over here is changing so it makes it much more user friendly this way and also more performant because we don't have to render and load all the other stuff also that has not been changed in this video we will learn about data fetching in Nexus 13 and we will also take a look on suspense boundaries and how you can use those to enable criminal loading of your UI so let's dive in so over here I have a fresh Nexus project open and let's start by getting rid of the pages folder because we won't need that and then let's create a page inside of an app folder and from there let's just export a function like this and let's try to start the server and by the way if you didn't already watch the video I made about the app folder explaining how it works and how the routing in the new app folder works I'll leave a link in the description so you can check that out but yeah let's start the dev server okay we are getting an error and it's saying that we need to enable the experimental app folder because it's at the time still experimental so let's do that we just add to the Nexus config this experimental property now let's try to start the server again and then switch to the browser and try to open up the page okay great so we get the hello text so everything is working and for this application I was thinking that let's create this kind of small dashboard that shows some user data and some companies data so that way we can demonstrate how to fetch data and also how to use the suspense features so let's start by going back to the vs code and as we can see here next is created for us this root layout file so here I'll just add a header over here saying that dashboard like this and yep it appears over there great then let's go to the page JS and Define the users and companies sections in here so let me do that okay so here I added some code so I made two columns that first one displays the users and the second one displays the companies over here so let's save it and see how it looks so this is kind of our dashboard view so on the left we have the users and companies on the right now as we can see we are just inserting some static data over here in the code so what we actually want to do is fetch the users from an API and then fetch the companies from an API and before we do any fitting you can probably tell that these could be their own components so let's add a user's component and companies component and thanks to the new app folder structure we don't have to create any components directory and put them in there but we can just add the components straight into the app folder and use them from there so let's start by adding the users component and inside here I just export a function and let's paste in the code we created so from here like this and then inside of the page let's import that component and then use it like this let's save it and see how it looks so nothing changed everything is still working great let's do the same for the companies so I add a new file to the app folder called companies then export a function and then copy the code from the page so over here and paste it in and then in the page I import the component and let's display it save it and check the browser looks like everything is working great so now we can start working on the data fetching and where are we going to fetch the data well I have an API running on localhost with one endpoint returns some users data and then another endpoint Returns on companies data over here so let's start with the users so I'll open the user's component over here and with Nexus 13 we can actually just Define the fetching logic right here in the component which is create in my opinion because it's right there where you need it and you don't have to hide it or bury it in some other functions or some other files so it's as easy as just defining a new function up here and then inside of here we can use fits to fetch the data so let's do that and the URL let's copy that so it was there and paste it in and then oh let's add a weight like that and then just return the rest.json like this then inside of the component up here we can call that function so let's do that and let's add a sync over here great and now inside of this list let's Loop those users and display some data like this so we are just adding list element for each user save it and let's switch to the browser and go to our web page and looks like users map is not a function but let's refresh the page and we still get the error let's see what's happening over here oh I made a mistake because the users are coming in a variable called user so let's do this over here so in the API we can see it returns an object with users over there so let's try this now so save it and switch to the browser refresh the page and yeah what do you know there we have some user data displayed so let's do the same for companies so inside of the companies component at the top I will Define that get data function and inside of the function I will use fetch to call the API and then return the chase like this and then inside of the component I will call that function and let's add the async and then let's map through those companies and show some data like this and all we need to add this one over here too like this so let's save it and then switch to the browser so now we have the dashboard and on it we have the users on the left and some companies on the right that's great so that's how easy it is to do data fetching with nexchester deal so we just need to add the fixing function up here and then call it inside of the component let's take a look on how we can make this even more user friendly so what I will do is actually stop my Dev server and go to the browser refresh the page so we see the site countries page and then fire up my server again and then refresh the page so now and you can see it takes a little bit of time before it displays the page and that is because the company's endpoint actually takes two seconds to load the company data and then return it so the application is persuading the API for two seconds before it gets the data from the API and for the user's endpoint it takes roughly one second to return the data so the application is not rendering anything before it gets all of this data and one thing we can do is add a loading indicator in our application so if we add a new file to the app folder called loading and Export a component out of it like this and then if we again stop the dev server switch to the browser refresh it and then start the dev server and try to refresh the page so take a look what happens So This Server is running then the browser refresh the page as you can see it actually shows the dashboard heading and then the text loading and once the loading is done it will display the users and companies so this is much better already and how this works is that if we take a look on our layout over here so next.js will right away serve this layout and the heading from it but then as a children we have the page which has some loading to do inside of those components so by adding the loading component inside of the app folder we can show a custom loading indicator while these components are being rendered or while the data is being loaded so that's one new feature of the Nexus 13 that we can add these special files called loading there are a bunch of others also you can take the documentation for those so there is I think also error and template and maybe some there but at least the loading is for the loading indicator so next test 13 detects that okay this component is still loading so let's show the loading indicator this is good but we can make this even better because if the users take only like one second load and then companies take two seconds to load wouldn't it be better to show the users as soon as they are loaded and then the companies as soon as they are loaded well yes so let's do that next and how we can do this is with a suspense boundaries so let's go to our page.js and I will start by importing suspense from react like this and then I will use it and the suspense takes a prop code fallback which is a component that will be displayed while data is loading you will see it in a second so for this I will just add a div saying loading users like this and then I will move these users inside of here like this then I will do the same for the companies like this so let's save it and see what happens so we are on the dashboard and now if I refresh the page you can see it first displays loading users loading companies and as soon as the users are loaded so the API Returns the data it will render the user's list while the company's list is still loading so let's try that again so I will refresh the page so it shows the loading users and then loading company so this way user right away sees the dashboard and some loading indicators that data is loading and then when any part of that data is fetched it will automatically be displayed right away rather than waiting all the other requests to also complete before rendering the page so let's try out changing these users out of that suspense call so now the users is not inside of the suspense boundaries I'll save this and let's try to refresh the page and as you can see it first shows the pages loading text that came from the loading indicator we defined here and after the users are fetched then it will display the users but still be loading the companies because the companies was inside of a suspense boundary but let's move these users back inside of that suspense boundary and save it and refresh the page so you can see it displays the both floating indicators right away and when the users are fetched displace demand when the company serve it displays them so this is how you use the suspense boundaries inside of a Nexus 13 application I hope this video was helpful and please let me know in the comments what you think of this and if this video was helpful and also if you are not already please hit the Subscribe button below too today I want to show you how to generate OG images from HTML and CSS with next.js we will use the new virtual OT npm package to do this but why would you want to generate images or why should you be excited about this well that's a very good question and the answer is that with these package you can automatically and dynamically generate your OT social card images for your paid CS without any extra work and we all know that it's super important for SEO and for those social shares of your pages to have those OT images in place so let's dive into the documentation and take a look on a couple of examples real quick here I have opened the OT image generation documentation page and right up here they list some of the benefits of using this and first one is perfect performance so the generation actually happens on the it's and the API routes that do the generation and use these packets are run as its functions so that makes them super fast and the next one is ease of use so we can Define the images using HTML and CSS as mentioned and the library will automatically and dynamically generate images from that marker and third one we have the cost Effectiveness so these packets actually automatically adds the correct headers to cast the computed images at the edge so if we have generated an image earlier it will use the cast version instead of generating it again so this is great about the supported features they support basic CSS layouts custom fonts text wrappings entering nested images that's great and they are compatible with any framework and application deployed on their cell let's look at the usage requirements so we need node.js16 or newer to use this but note that only Edge runtime is supported so the default node.js runtime is not supported and we need to use the experimental Edge runtime so let's remember that but let's get started I think they have a code snippet over here yeah so what I'm going to do is let's actually open up vs code and copy this one from here and paste it in to our own application and go from there so here I have empty next.js project open just freshly generated I will create a new file in the API folder called ot1.jsx and inside of here I will paste the code from the docs and let's save it so let's take a look on what happens in here so first we import the image response from the library then we need to define the edge runtime with the config runtime at experimental Edge and note that this is a new feature in the latest Nexus version that you can run your API routes as its functions also so you just have to pass in that runtime experimental Edge config but that feature is coming from there and it's as the name suggests is still experimental but next as with any APR out we want to export a function and inside of that function we return that image response we import it here and looks like that as a first parameter it gets the HTML that we want to have in the image and then the image width and height as a second parameter and right here we have some basic styling and then just the text hello world so let's save this open up the console and I almost forgot so first we of course need to install that OT package so let's do that great it's installed then I will start my Dev server and go to the localhost and the API route we had was Slash API slash ot1 like this so I'll open that up it looks like we get an empty image and now that I've refreshed the page it actually displayed the text so there was something going on but yeah this is image from that HTML that we defined that's pretty cool so let's test it out I'll modify it a little bit I'll add a couple more more exclamation marks and save it and go to the page and refresh it and what do you know it updates the picture so looks like it's working so this is like the hello world example so let's try to add some Dynamic functionality over here so what if we could pass in this text as a parameter for this aprl this way we could create a dynamic image every time we call this so let's do that I'll start by adding the request variable as a parameter then I want to get the search parameters from that request so let's do that and then I want to get the text parameter from those search params so context equals and search params get and text like this and then let's use that variable inside the div right here like so so I'll save this switch back to the browser and now as a parameter I pass in the text and let's say hello there press enter and looks like it's working so it generates the image from that text let's see what else we can do with this so this was the default example but I think there was an other examples also yeah so down here we have a bunch of examples that we can take a look but let's take a look on the dynamic external imits so we can actually get an external image to our image so I think they had the GitHub example right here yeah so I'll copy this again and switch the vs code create a new API route called OG to jsx paste in the code and let's see what's happening in here looks like this was typescript code so I'll just remove that and we should be good to go so first again the image response over here then defining the experimental Edge and then we again export a function where we first get the username search param from the URL then do some null checking for it and return a default image if the username is not provided then again from this API route we return that image response and here we have the HTML for the image so it's a div with some Styles over here and then inside of the div we have an image and as a source parameter we are referencing to GitHub so fetching a GitHub image or GitHub avatar for the username and if you didn't know you can actually get anyone's GitHub Avatar like this so if you go to the github.com slash then the username for example me dot pnt so that automatically gives you the avatar for that username so that's what we are setting the source for the image over here and then just displaying a text with also the username like this so that's all that happens here so let's save it go to the browser and I'll go to the correct URL so it was the OT 2. so let's first write without the username and we get this default image guiding us so let's add the username like this and let's try mine and what do you know it generated the image with my avatar and the GitHub URL let's try something else so for example virtual Works literally fi that works yeah it were and like I know it's localhost but even though it works super fast I think so that's how to add an external image to your OTE image or generated image and let's see there was still some other examples over here so we can use Dynamic title that we did and the external image we did but then also you can use emojis if SVT is custom fonts and also Tailwind which is interesting so this is still in the experimental mode but basically you can use Tailwind stylus to Define your image over here and it works out of the box so yeah that's definitely something I'm gonna be testing out overall I think it is very interesting package to use and what I'm most excited about is that with the help of this virtual OT Library I can now add automatically Dynamic OT images for my blog posts without any extra work because for me making the images when publishing a blog post is always the most like Tire something to do and frustrating and if I can automate that face with this I am one happy camper let me know in the comments what are your thoughts about this I would love to hear it and also if you enjoyed this video please hit the Subscribe button below I would highly appreciate it in this video we will take a look on server and client components in next.js30 I'll right away at the beginning show briefly the documentation of them and point out few things from there but if you have already read that and just want to see the coding part then you can jump ahead and leave chapter markers down below but let's get started so here is the documentation for server and client components and probably the number one thing that you need to know is set right here so by default all components inside the new app directory are react server components so this allows us to automatically adopt the server components with no extra work and some of the benefits of using server components are set right here so we can better leverage the server infrastructure for example large dependencies that previously would impact the JavaScript bundle exercise that is sent to the client side remains now entirely on the server so the amount of JavaScript sent to the client is reduced which is good however we can't work entirely without JavaScript so the app directory still needs some JavaScript and when a route is loaded at the next.js and react runtimes will be loaded and those are cachable and predictable in size and this runtime does not increase in size as our application rows and whenever we need some additional JavaScript on the client side for example some click events or that kind of stuff then we need to use the client components so the server components are completely rendered on the server and then the client components are surprise surprise rendered on the client and with nextas decline components can also be pre-rendered on the server and then hydrated on the client if pre-rendering and hydration are something that you are are in YouTube no worries I have a video explaining both of those so I'll leave a link for that in the description and you can check it out so basically all of our components inside of the app directory are rendered as server components unless we add a keyword use client on top of the component code so we can use client components by adding this use client statement at the top of the component file and that's all we need to do in order to render a component as a client component so when should we then use server components and when client components well first of all if you are trying to use some features or apis that are only usable in client components next.js will throw an error so that's one way to know it but right here we have a nice table explaining some of the things that you should do with server and client components so with server components whenever you are fetching data you you should use server components there are exceptions you can also fetch data with client components if you really need to but it's recommended to fetch the data in the server component then of course if we access some backend resources or if we have some sensitive information for example tokens or API Keys those should be kept in server components and then also it's recommended to keep large dependencies on the server which reduce the client-side JavaScript on the other hand if we want to add some interactivity for example with click handlers or on change handlers or if we want to use state or lifecycle effects or browser only apis or some custom hooks that that depend on state effects or pressure only apis then we should use the client components and also if you are using react class components then you need to use the client components also but I think that's enough for us to get started with the client and server components and we can jump into the vs code so let's create a simple application that demonstrates the difference between server components and client components and I have here a fresh next JS application using next cs13 open and what I'm going to do first is get rid of the pages folder and create a new folder app and inside of that I'll create page.js and over here I will export a function like this and save it and then let's fire up our Dev server and we need to add the experimental app there true statement to the next JS config so let's do that like this and then try to run our Dev server again and switch the browser and see how it looks okay we get the hello text so everything is good now let's hop into the page.js let me make this a little bit smaller like this so let's create an application that fits as blog posts from an API and then just shows them in a list and I should say that for this we are just going to use a dummy Json API to get the posts and then display them so let's get started by actually adding a heading over here and then I will add a post component right here that will handle the data fetching and displaying the blog posts and since we don't yet have this I will import it over here like this and then create that component so new file posts.js and then I will export the function from here like this and let's save it and see that it works looking good next let's fetch the data so up here I will Define a function that fetches the data like this so we are just going to fit the posts from this placeholder API so if we navigate to this URL with the browser uh we can see it returns a bunch of blog posts as a Json so next let's call that function inside of the posts component and then render the posts like this so we are calling the function over here getting the post and then mapping through them and just rendering the title so let's switch to the browser and see how it looks so looks like we are getting bunch of these titles from the API so let's say we wanted to show the title and the body of a blog post and let's actually create a new component called post that will display those so I will create a new file over here called post.js and then export a function from here that displays that data like this so we are getting the title body and ID as a data prop and then just displaying the title and body over here so let's go to the posts dot JS and import that component like this and then use it instead of the deep like this let's save it and see if it works looks like it so we get the title over here and then the body over here and we have a bunch of blog posts so that's great so at this point I just want to point out that this post component right now is a server component and actually all of these components we have are server components and that's because they are in the app folder and they are not using the use client statement so the post component is also a server component and this data fetching that we do over here is done on the server and then the client just gets this component with the data already rendered so no data setting to this Json placeholder API is done in the client side and we can actually test this so we have the network tab open over here so I will clear that and we can actually also change the fetch step and now if we refresh the page we can see that no fetch request was made to that station placeholder API so all that is done in the server but how about if we wanted to add a like button over here for each of these posts so let's take a look how to do that so first of all I will create a new component for that so new file and like button and then just export a function from it like this and then let's use it in the post component so let's import that like this and then let's render it under the body like so now let's save this and switch to the browser I will refresh the page and looks like it's loading quite a bit this actually happened to me a couple of times I'm not sure what this is about but what helps here is just to close the server and then boot it up again I don't know if this is something to do with the app device still being in beta or something like that I don't know but that that at least helped last time and what do you know it helps now so yeah we have the like button over here now so right now the like button is a server component but let's actually make our like button a real button and add some functionality to it so let me just make a couple of modifications like this so I added a button with on click Handler just throwing an alert saying that you like this so let's save it and go to the browser and right now we can see that we have an error over here saying that event handlers cannot be passed to client component props so what this means is that in order for us to use this click Handler we need to convert this like button to a client component and how we can do that well all we have to do is add that use client statement up here like this let's save it and go to the browser and now we have a like button over here and no error anymore and if we click the like button we get the alert saying that you like this this like this so as we read in the docs if we want to add some unchanged stuff we need to use a client component and also if we wanted to use some use state or use effect hooks for example then we would also need to use a client component so let's say we wanted to change the button text based on user clicking on it so for that we would need use state so let me add some code over here and let's go through it together so like this first I imported the use state from react and then added disliked State for the component and then when the user clicks the button it toggles the is liked variable and based on that it will display either unlike or like so let's save it and take the browser so now we have the light button over here and if we click it it will change the text to unlike so using the U State also requires us to use client components so this component over here uses client components so it's rendered on the client side whereas the post component over here is rendered on the server side so this title and body are already rendered in the server and then this component is sent to the client but the like button itself is rendered in the client side because we use the use client statement at the top of the file hopefully this clears things up for you regarding the client and server components I know this is just a short simple example but I still felt that I should make this video just explaining the basics in this video we will take a look on how to add authentication to your next test 13 application using next auth we won't go into details on how next auth works but we will rather see how to use the authentication inside the new app folder that came with Nexus 13. without further Ado let's Dive Right In okay so here I have a Nexus 13 application open that I already did some work on and what I did was actually just this getting started portion of the next auth so I created a new project with create next app then I added the next odd package to it then I created this next auth API route and then modified the app.js to correspond this one over here and next I created this login button component with this code over here so let's take a look on this in the vs code so so first of all here is the app.js it has decision provider wrapping the component and inside of the index we are displaying a heading and then the login button and here is the login button so right here it's basically the same code as it was in the documentation only difference is that we are also rendering this user information component that gets the system user as a prop and what that does is it only just displays the user data as Json and last we have the API route so the slash API slash auth slash next auth and this is the same code that was in the documentation up here I think yeah over here so basically I just followed this getting started section of the next auth documentation I'll leave a GitHub link to the description so you can check out this code and I'm thinking of creating just new prints for this starting position so you can check out this if you want to follow along so let's just quickly see how the application looks so I will start the server and switch to the browser like this so we have the heading and then the login button saying that we are not signed in and when we click sign in we will be prompted with sign in with GitHub and when we click that we can sign into the application and we see our information down here and then we can sign out from the sign out button over here so sign in sign in with GitHub and it will display our information over here so as you can see this is very basic example and I wanted to keep it that way because my thought was that I want to see how I can convert this application using the thesis folder and the authentication in there how I can convert that to using the Nexus 13 app folder and the server and client components so that will be the focus of this video so we will basically now take this application and convert it to use the app folder so let's get started by first adding the app folder over here and then let's add a new file called page inside of it and from here I will export a function like this and then I will add to the next test config the aptiver experimental property like this and this is just because at the moment the adapter is still experimental so we need to Define it in the next test called then let's try to run this so yarn div and looks like we are getting an error about the index and Page JS conflicting so let me just rename this index real quick like this and then restart the server and check the browser okay we get the text from the page.js file over here so we are now using this page.js so next let's just copy paste everything from the index.js to the page JS like this and I'll just rename this the page and now we can see we are importing the login button so let's actually move the login button to the app folder from the components folder I'm just gonna track and drop it over there and update the Imports over here and let me just just in case restart the server and open up the browser and now we are seeing a lot of red over here but yeah we are getting an error saying that react context is unavailable in server components so what's happening in here is that now that we are using the login button component inside of the app There It Is by default rendered as a server component and if we take a look on the login button component we can see that we are using click handlers and the session over here and all that kind of stuff that goes with client components so let's just first Define that hey this is client component and we can do that by adding the use client at the top of the file like this so now let's save it and see what happens okay we get an other error saying that your system must be wrapped inside of a session provider so if you remember we used inside of the app.js this system provider so now we need to edit also to our app folder so the best place for that is inside of the layout or the root layout and we could edit over here so wrap this whole thing inside of a system provider or just the children or that kind of stuff but a better way I think is to actually Define a new component called providers that will then have all the providers that we need and it will wrap the children inside of those providers so that sounded very complicated but let me show you how to do it so let's add a new file in the app folder called providers and this now will be a client component so I will add the use client and then I will import the system Provider from next auth like this and then I will export a function and I will get the chill trend from the props and then inside of the function we will return the children wrapped by the session provider so like this and looks like I have a typo over there like that okay so now what this component does is it adds the system provider around the children that are passed for this component so now we can in the layout imported providers and then we can use it over here in the body like this and then just move the children inside of that provider's tag like this of course we could wrap everything inside of the return statement inside of the providers but we really don't need to add it's not a good practice to do it like that so we will just wrap the children inside of the providers and that should do it and one thing I want to mention also is that if you have more providers or some context stuff you can just add them inside of this provider's file and wrap this inside of them so that way you can have all your providers inside of this file and the layout file will look just like this so now let's save this and check out the browser and Let me refresh the page and looks like it's working so we are getting the same information we got with the previous version so it's our login information or the user information and now if we sign out we are signed out Let me refresh the page and now if we click the sign in we are prompted with signing with GitHub so let's click that and the login seems to be working one thing we actually forgot to do was inside of the login button to move this user information inside of the app folder too so let's do that so I'm gonna drag it and move and update the Imports like this and let's save the login button and switch the browser I'll refresh the page it looks like everything is working so this is a bit weird because if we take a look on the user information component so now that it's inside of the app folder it should be rendered as a server component by default and as we can see we have no use client statement inside of it and we are not using any state or click handlers or that kind of stuff so I would assume that it's a server component right now and we can test this by adding a console log over here saying that hello from user information and let's save that so now if this is run on server we should get the console log down here but if it's run as a client component it should be displayed in the JavaScript console of the browser so let me just switch to the browser refresh the page and looks like it is displayed in the JavaScript console down here and this is a bit surprising for me so the only thing I can think of is that because we are rendering it inside of the client component this component will also be rendered as a client component so basically the user information component can be rendered as a server component but if it is rendered inside of a client component then it will also be rendered as client component so that's just one thing to keep in mind and if we wanted to render a server component inside of the client component we can do this with the children prop so let's see how that is done so first of all I will just add a new component here that I will use as a server component I will call it app description and let me just add some code inside of here like this so we are just exporting a function with the text that this is the application description and it's a server component so now how we can render this with our client component well let's switch to the page.js and modify this login button rendering so I will add like this and then we can pass in this component as a children for this login button so let's first actually import it like this and then we can just pass it in over here like so and let's save this and inside of the login button we can now render this with the children so let's say we want to render it under the sign out button so let's add it over there like so and I need to still Define the children or get the children from the props like this and looks like I made it typo again okay now let's save it and show it in the browser so we can see it is displayed under design out button so let's log something inside of this component like this and now if I go to the browser I refresh the page we are only getting the hello from user information in the browser console and now in the server console we are getting the hello from app description.js so this component now is rendered as a server component because we used it with the children inside of a client component okay but next you might ask that okay can we use this session data inside of a server component like the app description for example the answer is yes we can but it's still in beta and very unstable so next odd provides this unstable get server session function and as they say in here this feature is still experimental and it might be removed or changed in the future so I would keep that in mind when using this but let's see how this function can be used inside of a server component so I'll switch back to the vs code and let me add couple of lines of code inside of our app description JS component and then let's go through it together okay so what I did here was I imported the unstable git server session function from next auth and then I get the session inside of the component with that function like this and then we are just rendering the username under the text div over here so let's save this and see if it works so let me refresh the page and Yep looks like it's working so we are getting our name under the text down here so this is pretty cool and again we are not getting any logs from the app description say yes inside of our browser control but we are getting them inside of the server console so that's just verifies that the component is rendered in this server or as a server component so now that we have the session data available inside of our our server component what we could do is use the user information component to display that data so let's do that next so first I'll import the user information component and then instead of this username I will just render the user information pass in as a data the session dot user like this and let's save it and actually go into the login button and let's comment out the user information from there so we are not rendering it inside of the login button anymore and we are just rendering it inside of the app description so let's save it and with the browser and Let me refresh the page and now looks like that the user information is displayed under the text inside of the app description component and what we can see also is that there is no console logs in our browser console and if we check the server console we can see that we have a hello from App description as expected but then also we have a console log from the user information component so now that we are using the user information inside of the server component that is the app description the user information component is also rendered as a server component so just recap on what we did in here so let's open the layout the root layout so first what we want to do is wrap the children with the providers component and the providers component had the session Provider from the next auth and it basically just wraps the children inside of it so that's the number one thing we need to do when adding the authentication for our application and then if we take a look at the page.js in here we have the login button and that is a client component and we are getting the session information in here with the U session Hook from the next auth and then based on that display sign in or sign out buttons so if you are using client components in your application this is the way you can get the user information inside of the component and then if you are using a server component like we did with the app description you can get the session information with that unstable get server session function but again I just want to remind that it's still unstable so there might be changes or it can be even be removed so just keep then keep that in mind when using it so with that function we get the same system information inside of a server component and we can use it over there and if we still take a look on the page.js so what we learned also is that if you are entering a server component inside of a client component it will be rendered as client component so if you want to render a server component as a server component inside of a client component you need to pass it for the client component as children as we did in here so the app description is a server component and we passed it in as a children for the client component login button and that way we were able to render the app description component as a server component so I think that's something you need to keep in mind because what I was thinking at first is that if I just wrap the children with the providers and then put my components in there and that all that stuff you might end up pretty easily using test client components so I think that's really something that we need to think through when creating the hierarchy for the application and how we are using the components in the component 3 because otherwise we can just end up using client components and we get none of the benefits that come with server components hopefully you found this video at least a little bit helpful and it help you at least a little to understand how to use the authentication inside of the Nexus 13 app directory and if it did please do leave a like and hit the Subscribe button too if you are not already subscribed in today's video we will learn how to protect your next JS API routes using next auth so let's Dive Right In first let's start by creating a new next.js application okay let's open it up with vs code and let's just fire up the dev server to see that everything is working I'll type in here on dev and open the localhost 3000 and we get the default next.js application great So the plan now is to add the next odd to this application and then add a login button that we can use to log in and log out and then create one API route that is protected meaning that you can access it without logging in so let's start by getting rid of all this boilerplate code so I'll open the index.js file and from the render method I will just remove everything like this and we don't need those Imports anymore like this and then I will just for now print hello over here let's see okay it's working and next as I mentioned we will use next auth for the authentication so let's open up the next odd web page and I will just go over here to the get started section and copy this install command so we will use yarn to add the next auth package so I will stop the server and paste in the command like that and next let's see the get started page so what we want to do next is create this next auth.js file which will handle the authentication so what I'm gonna do is just copy this code over here and looks like we need to create a folder called auth into the API folder and then place this inside of that so let's do that next so inside the API folder I will create a new folder called auth and inside of that I will create that odd file then I'll paste in the code that we copied and let's take a closer look on this file so we are importing this GitHub provider and then passing in client ID and client secret so what this means is that we will use GitHub for authentication or logging in so we will use our GitHub credentials to log in and that's totally fine for this we could use some other ones also they they have these adapters for Twitter Facebook and bunch of others but for now let's just use the GitHub provider so next what we need to do is to create a GitHub application that we will use for the authentication so right here you can see that we are getting these GitHub secret and GitHub ID from the environment variables so in order to get those let's go to GitHub and you can go to the developer settings so just going to the this URL slash settings apps and then go to the oauth apps and you can see I already have one but let's create a brand new for this application and let's give it a name like this and then for the homepage URL we can just type in the localhost 3000 for now and then this authorization callback URL for GitHub we want to put localhost 3000 slash API slash auth slash callback slash GitHub and that should be it let's register the application so now we get all this information so right here we can see the client ID which is this one over here and then the client secret can be generated over here so let's do that so over here is the secret for our application so let's now take these two values and put them into our application so we can use them so switch back to the vs code and you can see that we get this from this process.m dot then the variable name one way you could do this is to just put the ID and secret over here like this but this is not good because this way the secrets will be committed together with your code and that's something you don't want so let's keep it like this and in order to Define this environment variables we can create an environment file in our repository so let's do that I'll call it dot n dot local and right away you can see it's grayed out which means that it's in git ignore so it won't be committed committed with the other files so let's open that up and inside of here let's define those variables so GitHub ID and then GitHub Secret like this and go back to the GitHub and copy the ID paste it in and then for the secret let's copy this one and paste it in like this let's save it and I think our application should be ready the GitHub application so let's switch back to the next auth and everything should be fine in here also so next step let's go back to the next auth web page so we created the next auth file next we need to wrap our application inside of this session provider so I will just copy everything from here also and open the pages at jsx file and I'll just remove everything and paste in the code we copied so what we are doing here is getting the session Provider from next auth and then just wrapping the application inside of this session provider and providing the session as a prop for that provider and I know we are using the app.js file over here and not the Nexus 13 app folder and that just because this is a simpler to set up and if you want to set it up in Nexus 13 and the app folder I have a video also about that so be sure to check that out because it's also possible with the app folder and if you want to use it check out the video it's all there but for this example we will use the app.js file just because it's faster and easier to set up right now so now that we have wrapped our application inside the session provider the one thing left to do is add the login button and we get the example login button also in the get started section of next order so over here is an example login button so I will just copy that and go to vs code and create a new folder called components and inside of that I will create the login button component and paste in the code and save it and now let's go to the pages and the index.js file and replace the hello text with the login button and let's import it like this and yeah so now I think our application is all set up for logging in through GitHub so let's try it out and fire up the dev server and open the localhost 3000 let me just make this a bit bigger so we are getting the not signed in text with which is coming from the login button over here because we are not signed in so let's try to sign in so when I click this I get this sign in with GitHub and this comes because we added the GitHub provider inside the next odd JS file so if we would add more providers over here they would appear then on this page so for GitHub we want to sign in with it so let's click that and now it's asking us that do we want to authorize the application we created to use it to log in or authorize so yeah authorize and it redirects us to our localhost 3000 and it says that we are signed in okay great so the sign-in is working so next let's actually create the API out and add the protection for it so I'll go to the vs code and I'll create new API route inside the API folder and let's call it protected like this and just for now I will copy the hello API route inside of it just to test it out that it's working like this so let's switch to the browser and try to access that API route okay looks like it's working so we get hello from protected text so now what we want to do is actually log out so let's sign out and I will open up that API route to a different tab like this and right now we can see that we get hello from protected text so it's still working okay so now let's add a check for the API route to see that the user is logged in and if the user is not logged in let's show a message that hey you need to log in so I will switch to the vs code and I have the protected.js API route open and let me add some quote over here for the check and then let's go through it together line by line okay so right now what I did was first of all added two Imports one for the auth options which comes from the next auth file we had over here and we will use it later on in the code and then I imported the unstable get server session function from the next auth next and then I change the Handler function to a sync because we are using a synchronous function the get server system function and then on line five we are getting the user session and how we are getting that is with the unstable get server session function and that takes the request response and the auth options that we imported as a parameter and as the name suggests this is still unstable so there might be some bugs or something like that but this is still the way that next auth recommends the to do this in their web page and then on line seven we are simply checking that if the session was not found then we are sending the response that hey you must log in and if it was found it won't go into this if clause and it will go to the end over here and return the hello from protected text so let's test it out so right now we are not signed in so let's try to open up the protected API out and refresh the page and looks like we are getting the message you must be logged in and that's what we want so let's try to actually sign in over here let's sign in all right then try to refresh the page and looks like we are still getting the same text and we are actually signed out is there something wrong okay so we get this decryption error and I think what this is all about so we still need to Define two more variables in our environment variables file and those variables are next auth URL and next auth secret so let me just add those like this so for the URL we are just putting the localhost 3000 which is our URL and this next auth secret can be anything you want so I just added a test over here so let's save this and try it again so I'll go and sign in we are signed in now let's see the API route and reverse the page okay so now we get the hello from protected text and we are still signed in in the other tab great and as I mentioned earlier if you want to use the next auth with Nexus 13 app structure that's totally possible and I have this video over here showing how to do just that I'm also planning on making more of these next auth videos so if you would like to see those please do let me know in the comments and also don't forget to like the video and subscribe to the channel if you are not already in this video we will take a look on how you can Define API routes in the Nexus 13 app directory so just yesterday the next JS 13.2 version was released and with it came this route handlers and these route handlers are basically a replacement for the traditional API routes we can read from the announcement that they support both it's and node.js runtimes and features like general purpose static rendering and revalidation and the way we use these routes handlers is by using this route.js or TS file and we need to export a synchronous function from it named by the HD HTTP verb that we want to Target so get post put to delete so on and one thing to note is also that this route.js or TS file is a special file and they are not available in the Pages directory as they are a replacement for the API routes and they are only available under the app directory but enough of talk let's take a look how we can use these in action so let's start by creating a fresh Nexus project and I will do it with yarn create next app and then give it a name so let's run this all right once it's run let's open up this in vs code all right so let's take a look on the full structure in this project so as you saw when running the create next app I chose to use the app directory so it created one for me over here and as you can see it didn't create a Pages directory anymore which it used to do before this and actually I tested this out like six hours ago and it still generated the Pages directory but looks like they got rid of that now and it's just using the app director if you choose to use it when prompted when creating the project so right here we can right away open this app directory and we can see that we have the API folder and inside of that we have a Hello folder and there we have that route.js file and if we open it up we can see that we are exporting a synchronous function called get and returning a new response hello next JS so let's just fire this up and test it out so I will open up the terminal and fire up the dev server and let's navigate to that localhost 3000 it looks like the front page is opening so let's try to access that API route by going to the slash API slash and I think it was hello like this and what do you know we get the text hello next JS so we can see that this aprl is working right now so we are making a get request to the hello API route and we are getting the response back but what if we wanted to make an API route and post something to it so let's say we wanted to post something to this hello API route so let's switch back to the vs code and inside the same route JS that is inside of the hello folder we can actually just add a new function below the get function like this so we are exporting asynchronous function and we are using the post verb now because we want to catch the post request and for now let's just return some Json so we can test it out and see that we are actually getting the post request to this API route so I'm gonna just return response.json and let's say message is Hello from post route like this let's save it and now we can't do it with the browser because this is making a get request so what we want to do is actually make a post request so I'm going to open up my Postman so if you're not familiar with Postman this is a tool that you can use to make API requests so right here I'm gonna make a new request and I'm gonna copy the address from the browser paste it in and then from here I will choose post because we want to make a post request and that should be it let's hit the send button and whether you know we get the message hello from post route and now if we change this up to get request we can send it and we get the response from the get function one thing you should note though is that we are now making the request to slash API slash hello and if you remember with Pages directory we had to put the API routes inside of an API directory and that way next is new that okay these are API routes but that's actually not the case with the route handlers because we can define a route file inside of any folder inside of the app directory as long as there isn't a page.js file in it or page.ts file so let's try that out by actually creating a new folder to this app directory and I'm going to call it blog posts and inside of that I will create a new file called route.js so let's say we wanted to get some blog posts when we hit the localhost slash blog posts like this so for now it doesn't do anything it says 405 because we haven't implemented the function yet so let's do that so export async function called get because we want to Target the get request method and let's actually fetch some blog posts from another API and then return those so I will Define a variable and then use fetch to get some blog posts and the API we are going to use for this example is the Json placeholder API so this is just an API that returns some dummy data that you can use when testing or developing and we want the posts so the address will be let's open it up in the browser first so it's system placeholder.tpco.com posts so we can see it returns some fake blog posts for us so let's copy that URL and paste it into the fetch like this and then let's get the posts like this and now we can return a response and we want to return Json and let's return the posts like this so let's try it out I'll open up my Postman and now let's try to make the API call to the slash blog posts and looks like we are getting the blog post data back to our Postman so the get route is working for that and as you can see we can call different apis inside of the route handlers and do a bunch of stuff in inside of here before returning response and again if we wanted to have another endpoint for this so let's say we want to have the post endpoint also all we have to do is Define the post function and then inside of here we could do some Logic for posting a blog post for example and then for our testing purposes let's just return response and the message like this so we can see that we can hit the post endpoint and I switch to the postman change the get to post and make the request and looks like it's returning the correct message and if we wanted to do for example delete again export async function and delete and then interfere do any logic we want and let's just test it out like this and test it out with Postman so let's change the post to delete and make the request and we get the correct message so that's how you can use API routes in the Nexus 13 app folder by using the route handlers and I just wanted to show you guys real quick on how to use them and how they work because many of you have been asking me on how to use API routes in the app folder and this is the answer the route handlers I didn't go very deep on all the other stuff we can do with the route handlers but if that's something you would like to see please let me know in the comments and I will make that kind of video where we take a little deeper dive on what else you can do with them and how they work hopefully you still got something out of this video and if you did please leave a like down below and subscribe to the channel if you are not already in today's video we will take a little bit of a deep dive to nextchase Route handlers we will learn how to use cookies headers redirects Dynamic route segments and also we will learn how to get the request body in a post request this is one of the most asked questions that I have gotten lately so hopefully this video will be helpful for you without further Ado let's get started so right here I have my terminal open and let's start by creating a new next.js application and remember to select the yes for this experimental app directory okay then I will open this up in vs code okay and something I like to do first thing whenever I create a new project is just to try to run it and see that everything is working so let's start the dev server and go to the localhost 3000 and looks like we get the default application and everything is working great so let's start with how we can use cookies inside of the route handlers and what I'm gonna do is open up the app folder and the API folder and then create a new folder inside of the API folder called cookies and inside of that folder we will create the route.js file and let's add just a little bit of code to see that we can access this route like this so we just Define the get function in here and then just return kind of hello word response so let's test this out so I will save this and next I will open up my Postman because we are going to be making get and post requests to these API routes it's just easier to test them out and see how they work with Postman and if you're not familiar with Postman it's a program that enables you to do all kinds of API requests with different kinds of parameters so let's start by creating a new request and the address is localhost 3000 slash API slash cookies so let's type that in like this and over here we want to use the get method and let's send it out and see what we get so looks like we get an internal server error so let's check the console okay so looks like we forgot the new keyword for the response so let's add that save it and try it again okay now we get the correct message over here so we can access the API route next let's modify the cookies that we are sending with this request so in Postman I will go to the headers tab and let's add a cookie header over here and let's add a cookie called token and let's say it's one two three four five like this so now this token cookie should be sent with the request whenever we are sending or clicking the send button so now let's see how we can catch this cookie inside of our route Handler so inside the route.js what I'm first gonna do is import cookies from next headers like this and this enables us to access the cookies that we are getting with the request then inside the get function we want to get a cookie store with that cookies function so let's do that like this and then if we want to get a cookie called token all we have to do is Define a variable and then call cookie store dot get and give the name of the cookie we want to get like this now let's actually return this cookie in our response like this let's save it and go to the postman and try to send this to request so we have in headers we have the cookie header with the token one two three four five and we should get that as a response so let's try it out okay so we get your token is object object so one thing we forgot to do is call the value for this token because this is an object with property value and that value has the token value so let's add over there token dot value and let's save it and switch to the postman and try again okay now we get the correct token your token is one two three four five so this is how we can get cookies from a request but these are just read only so if we want to modify the cookies we need to return a new response with set cookie and then the cookie value we want to set it to so let me just type it out and let's see through together okay so like this so what I did here was add for this response another parameter which is an object I added status 200 so the status will be 200 and also then in the headers property we are saying that set cookie should be token equals then the token value but then I added this modified text at the end of the token so we can see if it actually works so let me save this out and let's test it out so I'll open my Postman and inside here we have the cookie one two three four five so now if we send a new request we can see that we got the correct text as expected but then if we scroll up a little bit our headers we can see that we got this cookie header up here and the value for it is the cookie that we defined in the route Handler so that's how you can set cookies if you want but if you just want to read them you can use this cookie store to get all the cookies you want okay so next let's see how to use headers with the route handlers so again I will create a new folder called headers and inside of that folder I'll create the route.js file and these headers work pretty much the same way as cookies does so let me just type in the code and let's go it through together okay so first we import headers from the next headers then we Define the get function and inside of that as we did with the cookies we are getting a header list in this case by calling the headers function and then from the headers we can get any header we want and in this case let's get the host header so if we check out the postman we can see that the host header is sent with the request so let's get that and then just return it as a response over here so let's test it out save this and open Postman let me create a new request and the endpoint is slash API slash headers like this and yeah Let's see we have the headers and for the host header it says it's calculated when a request is sent so let's try it out let's send this and looks like it Returns the text you made the request from localhost 3000 and that is our host so that's correct we could also get for example the user agent let's try it out so I'm just gonna replace it here and the text will be wrong but that's okay just to see that how it works so let's send it and it looks like it gets the correct value for that header let me just make it back as host okay so that's how you can get headers in the route handlers and if you wanted to return the host header for example for the response we can do it by adding a new parameter in the response and let me just type it out and let's go through together again like this so I added the status 200 over here also but on the line 9 we are setting the headers for the response and we are saying that the host header equals the host header over here so let's save it and try it out so let's make a new request it Returns the correct response but now if we look at the click over here next to the body we can see the response headers in Postman so let's click that and scroll up a little bit and what do you know looks like the host header is passed as expected so that's how you can return headers with the response so next let's see how to do redirects with the route handlers so let me create again a new folder called redirect and inside of that the route.js then here we want to export the get function like this and then inside of this get function we can just call redirect and say where we want to redirect so let's say we want to redirect my website like this and of course we need to import that redirect also so let's edit up here and it was from next navigation like this let's save it and let's try it out and for this I will open up the browser and try it out over there so we can see the redirect in action so it was API slash redirect like this so I'll hit enter and looks like it creates the redirect so it's that easy to do redirects with route handlers next let's take a look on the dynamic route segments and how we can get the route parameters to our route handlers so let's again start by adding a new folder and I will go call this DRS so Dynamic route segments then I will create a new folder under that and use the brackets and slug inside of them and then inside of that folder we want to create the route.js file so if you're familiar with next.js routing this syntax with brackets should be familiar for you but if it's not I have a videos explaining that so be sure to check those out from the channel but for this route JS let's add the get function also like this and let's for now return a new response like this and test this out that it's working so I'll open up my Postman create a new request and go to the slash API slash DRS and Slash and then here is the value that will be assigned for the slug over here so let's just add full bar like this and send it and we are getting the correct message so let's see how we can modify this so that the message would return the value of this slug so in this case full bar first thing we want to do is to add another parameter for this get function and it will be an object and inside of that object we want to get the params variable like this so This params variable will have all the route parameters in it so inside of here we can say let slug equals params dot slug like this or if we want to make it shorter let's do it like that so now we should have in this slug variable the value of full bar in this case so let's just modify the message to have that slug value in it like this so I will save this and open the postman and let's test it out looks like it's working so it's returning the full bar so what if we change this up like this send it looks like it's working and if you had more URL parameters in the route then you could just have them defined over here and use them in the route Handler as we as we are using the slug over here okay then last let's see how we can get a request body from a post request so let me just again create a new folder in the API folder let's call it post data and inside of it create the route Handler like this and now since we want to Target the post request let's export the post function over here like this then for now let's return a new response like this and test it out that it's working so I'll open up my Postman let's create a new request and the URL is slash API slash post data and now that we are making a post request we want to change this git to post and let's send it away and looks like it's working so let's say we had a body so we can Define the request body in the body tab in Postman and let's say in our body we have a name variable and we want it to return that name in the response so let me just choose the data type in here so we will be using raw and it will be Json so I'll add some Json over here so let's say we have name equals dilemma like this so now whenever we send this this Json will be sent as a request body or as a payload for this request so let's switch to the vs code and see how we can get that body from the request so this is actually something that I used quite a lot of time to figure out but it turned out to be easier than I expected so if you want to define a body we can get the request body from the request by calling request.json like this and of course add weight in front of it because it's a synchronous function so like this and now let's modify the message to return the name like this and let's define the name variable and it's of course body dot name like this let's save it and test it out so my name is let's send it out and looks like we are getting the correct value now if we change this up a little bit it's still working and of course if we have other variables here for example website like this we could get this in the route Handler like this so let the website equals body dot website like this and let's modify the message like this save it and let's test it out and it's work so after all it's that easy to get the body from the request and if you're curious on why this works like this we can actually find the answer from the documentation so the request parameter that the get and post functions get is type of request so if we open up the documentation for the request and scroll down over here a little bit which g dot Json function over here and over here it says that returns a promise that results with the result of parsing the request body as JS so this is why we can get the body of the request with this dot Json function I really hope that you found this video at least somewhat helpful and if you did I would highly appreciate it if you left a comment down below like the video and also if you're not already hit the Subscribe button below in today's video we will learn how to add oral-based authorization to our Nexus 13 application so let's get right into it let's get started by opening up this repository in GitHub and cloning it so I'm going to click over here and copy the URL and switch to the terminal and paste in git clone and then the Repository like that then I'm going to open up that repo in vs code like this and let's actually quickly check out the GitHub repo one more time so if we look at the princess we have over here we have the starting point Brands and how this repo works is that next we want to check out that starting point print and start working from there because what I already did was to set up next auth and all the authentication logic in that starting point Brands and that's just to speed things up so we don't have to use time on this video on setting up the next alt in the next JS project and if you want to learn how to set up the next odd for an access 13 project I have a video about that so please do check out that on the channel but now let's check out this uh one starting point brands in our vs code so I'll open up terminal and type in git checkout and then the one starting point Brands like this looks like we are on it that's great so next I will run yarn install like this and then let's just fire up the application and see how it works the dev server is running and I'll open up the localhost 3000 and looks like we have a login button or sign in button and a text not signed in so let's click the sign in and sign in with GitHub okay so one thing we forgot to do was to add environment variables to our application so I'll switch back to the vs code and let's create a new file to the root of the directory called dot in dot local like this and inside of this file we want to Define four environment variables first is the GitHub secret then GitHub ID next odd secret and next auth URL and these are all required for us in order to authenticate with GitHub so let's add the GitHub secret and GitHub ID and how we can do that is to go to the GitHub and open up developer settings page so you can go to this URL and select the O out apps and we can create new or out app and let's give our application a name like this then the homepage URL which is localhost in our case then we don't have to add any description and for the authorization callback URL we will use this one over here now let's click register and just like that our application is created and we get the client ID and this is the value we want to copy and paste in for the GitHub ID environment variable the next we want to generate a new client secret let's click that and it will generate a secret for us which is this one over here so I'll copy that go to the vs code and paste it in for the GitHub Secret okay so now we have all the GitHub stuff in here for the next odd secret we can just add some secret for now so I will just add test and the next auth URL we can add localhost like this let's save it and now I think our application should work so let's run the dev server okay and switch to the browser and let's go to the localhost 3000. okay let me make this a bit bigger so let's click the sign in button sign in with GitHub okay looks like there is something wrong uh looks like it redirects us to the Local Host so I think we need to modify the next auth URL to be localhost 3000 like this so let's save that switch back to the browser and I'll go to the localhost 3000 again and let's click sign in sign in with GitHub now it asks if we authorize the O out app let's authorize and look like we are signed in so we get the user information displayed for us over here and one thing I want to mention about this authentication is that right now the route handlers are new thing for Nexus 13 but next odd doesn't work with them yet so that is why we have still the pages folder inside of here and we have init the API route auth and the next auth JS file which handles the authentication so just a heads up for that so in the future I'm sure we will have this auth API route inside of this app folder and inside of the route handlers or something similar but at the moment the next odd is not supported in the app folder so that's why we are using it in the pages and API route folder but next what we actually want to do is add couple of more pages to this application so we can test the authorization between those pages so let's start by going to the app folder and I'll create a new folder called admin dashboard and inside of it I'll create the page or actually I just copy this page file from here and modify it like this so we are just printing a text this is admin dashboard then I'll create a new folder inside of the app folder called profile page and again I'll just copy this page file inside of it and modify it like this and it's just this place this is the profile page text so let's see if we go to the browser and the localhost slash admin dashboard like this we get the text and then if we test the profile page we get the correct text over there great but in order to make things a bit easier for us let's add links to those pages to our actually our layout file so I'll switch to the vs code and open up the layout file and over here I will add those links so just give me a second like this so what I did was imported the link from next link and edit links for the front page to the admin dashboard and the profile page so let's see the browser so we get those links up here so if we go admin dashboard profile page front page and looks like every link is working which is great and again I just want to say that I wanted to keep this application really simple and just focus on the authorization parts so it's easier to understand what is related to the authorization and what is not so that's why this application is pretty simple as you can see but hopefully you will learn better through this example so now when we go between these Pages we can see that we can access all of them because we are signed in but if we sign out and go to the pages well we can see that we can still access them so the first step let's add a check for all of these pages that they are only displayed when we are signed in and if we are not signed in we will be prompted to sign in and how we can do that is actually with next test middleware so I will add a middleware.js file to the same level as the app directory is so middleware.js and now let's open the next auth documentation regarding this middleware right here so how we can protect our whole application so every page will require authentication well all we have to do is add this one line to our middleware so let's copy that and paste it in to the middleware save it and let's switch to the browser and let's try to access the admin dashboard and looks like we are prompted with designing so we can't access the admin dashboard because we are not signed in so let's try the profile page same thing so let's actually sign in and see what happens so now we are on the profile page now we can access the admin page and the front page but as you might have seen if you sign out and go to the front page like this it will also prompt us for the sign in and this is actually something we don't want so let's modify the middleware so that only the admin dashboard and the profile page require us to sign in so I'll switch back to the vs code and let me add one line of code over here and I'll explain it after that okay so what I did was I exported this config variable from this middleware and inside of that I can define a matter which is an array of routes that we want to match this middleware for so right now this middleware should be only run for the admin dashboard route and the profile page route so let's see I'll switch the browser I'll go to the localhost 3000 and looks like we get the front page rendered and now if we click the admin dashboard we are prompted with sign in so looks like it's working so let's sign in and now we can access the profile admin page and the front page okay so now our admin dashboard and profile page is protected with the sign in so we need to sign in in order to access them but let's say we wanted to only access or Grant access for this admin dashboard for users that have the role admin so let's see how we can do that next so first we need to modify our middleware file and let's do it so that I'll add the code over here and let's go through it together after that okay so here's what the middleware looks like now so in order for us to add some authorization for the application we need to use this with auth from the next odd middleware and we will export it by default and inside of that we will Define a middleware function and then also some callbacks functions so let's start with the callbacks actually we are defining a authorized function and if this function returns true it will pass the authorization and if it returns false the authorization will fail so in this case we are getting the JWT token from the parameters and then just checking that it exists so if it exists we know that the user is authenticated and if not then we will return false and prompt the user with design in so that will be run first and if that returns true then this middleware function will be run and inside of this we are checking that if the path name is the admin dashboard so we can access the path name from the request and next URL so if the path name is the admin dashboard and the role is something else then admin then we are just returning a new response saying that hey you're not authorized and we are not going to the actual admin dashboard page so in this case we are accessing the role from the token which can be accessed in the next auth variable of the request and right now when we are using GitHub we are actually not getting a role property in the token so this should fail right now so let's test it out so if I save this and switch to the browser and try to access the admin dashboard Let me refresh the page we are getting the you are not authorized and that's just because GitHub doesn't return a role parameter so if we want to modify the token in the application we can do that so let's open the next auth JS file and inside of here we can for the auth options Define callbacks and if we want to add a role for the token just to test this out so that it works we can do the following like this so we are defining a callback called JWT and we can access the token from the parameters and right here we are just setting the role for the token and then returning that token so when we do it like this the token inside of the request over here will have the role that we defined in the next odd callbacks in this JWT callback so let's test this out I will save this switch to the browser and let's refresh the page and actually I think we need to re-log so let me sign out sign in sign in with GitHub okay we are signed in and now if we access the admin dashboard we can see the text over there so now we are authorized for it and now if we go back and let's say that our role would be member save it I will sign out sign in and try to access the admin dashboard we can see that it gives the not authorized message hopefully this didn't feel too complicated and you got at least some idea on how the authorization and role-based authorization Works inside of the Nexus 13 and next alt as said I hope you got something out of this video and if you did please do leave a like And subscribe to the channel if you are not already in today's video we will take a look on how to add Internet generalization to your Nexus 13 app using the app router we will first take a look on how to add the internet analyzation for Server components and then also how to use the translations in client components so let's get started so in order to add Internet the analyzation for our application we are using this next Intel library and as they say right here they are supporting the Nexus 13 and the app router so let's actually click that open and if that's not there I think you can click to get started and then go down here next to 13 and get started and right here they are saying that with Nexus 13 and the app router there are two major changes when using the next Intel and the first one is the next test has removed their built-in internet the analyzation routing and the second being that next test now supports react server components and in order to leverage these new capabilities of next JS next Intel supports now Cloud components middleware for i18 and routing localized navigation apis and server components and just a heads up that at the time of recording this video the support for Server components is still in beta so that's just something to keep in mind when using them but let's click that server components open and let's see how we can add internet analyzation for our server components so before diving any deeper into this let's first just create a fresh nexjs application that we can add this internet analyzation for so I'm going to open up my terminal and I'm gonna create a new Nexus app using the create next app and once that's run let's open up that in vs code like this and then let's do some cleanup so I'm going to open up the app and page file and just remove everything from the return call and add a div and a paragraph inside of it and it says say just hello world like this let's delete those Imports and save it and let's open the terminal and just fire up the dev server like this and I'll switch to the browser and go to localhost 3000 and I'm going to open up my Dev tools also so okay we see Hello World so our application is running which is great so let's hop back into the next Intel tutorial okay so first they're saying that the current beta version is this one over here and if you're watching this later on this can be a different version or the support for Server components is already out of beta so just keep an eye on this version and use that in your own project if you are following along so what I'm gonna do is just copy this version over here and switch to the vs code and just add that as a dependency so yarn add and then that version like this okay let's switch back to the browser and scroll down a little bit so to get started we first need this kind of folder structure for our application let me just make this a bit bigger like this so if we look over here we will have a messages folder which holds the actual translations so next it'll uses the term messages for those translations and inside of that folder we will have all our Json files which include the translations then we need i18n configuration file and then we should have the next config file which we already have but I assume we have to do some modifications for that then we need the middleware file and this is important so inside of the app directory we want to create this kind of folder and then put all of our other Pages inside of that folder so that's how the next interlock will know which local we want to use so let's get started by adding the messages file so let's edit for English so I'm just gonna copy it from here so it's the browser and create a new folder called messages and inside of that I will create a new file called en.json and paste in the Json like this then let's see in the browser The Next Step so next let's add this i18n configuration file and I'm gonna actually copy all of this right now and switch to the vs code and create that actual file so it was i18 in and on the website it was TS but I'm just gonna use JS over here that works also and let's paste in the code so what happens in here is that with this configuration file we will Define which translations or messages we want to load for given local so that's used for it let's switch the Deep browser and take the next step so we want to modify the next config JS file and for this I'm gonna actually copy just these four lines over here and go to DBS code and open up my next config file and what I'm going to do is paste in those two lines over here and then I will change this TS to JS because this defines the configuration file we want to use and as we just made it a JS file we want to rename it over here to and then I'm just gonna use this with next Intel and wrap the next config inside of it when exporting it so apply this and let's save it and let's see the next step so the step four is to modify our middleware and again I'm just gonna copy this from here switch to the vs code and create that middleware file and paste in the code and over here what we are doing is we are importing this create middleware from next into middleware and we are giving it parameters over here so with this locals we can Define which locals are allowed in our application and with this default local we can Define what local to use as a default if none other is provide and then this export config stuff is basic next test middleware stuff so right here we are just skipping all the pads that should not be intermatian analyzed and I'm gonna actually modify this and add f i so our application will support English and finish so let's save it and now let's switch to the browser and now actually before going to the fifth step let's try to run our application so I'm gonna start the dev server and switch to the browser and localhost 3000 and we are getting actually the not found error so let's see okay so what we actually forgot to do is the one important stuff which was to move all these files in a local folder so let's create that local folder over here and move everything except the icon inside of that folder like this so now let's see the browser and refresh the page and now we get the hello world text so our application is working so now let's take a look on the next step so what we want to do is modify the layout file and for this I'm just gonna copy these two lines from here let's copy them and paste them into our layout file so the layout.js and up here I will paste those Imports and let's just paste in everything we need and then let's go through it together so we need those and let's copy these lines and they go inside the layout component like this and then the last thing we want to do is pass in the local as a land parameter so let's copy and paste that over there like this so what we are doing here is importing the use local from next Intel and then not found page from the next navigation and inside of the component we can get the current local with this use local hook and that's what we are doing in here and this if Clause just checks that if our local is available and if it's not then we are just gonna show a not found page and then over here we configure that the document language is the event log and one thing we still need is to add that params into the props like this so this is all we need to do to configure the whole documents language so I'm gonna save this and let's see in the browser that we don't get any errors let's refresh the page okay everything is still working so now we are getting the hello world text but if we look at the page that we are rendering in there so this one over here we are just displaying the hello world text so the next step is actually translate this sentence and let's jump into the browser and see how that's done so we can translate Verge or sentences in our server components by importing this import use translations and then using it like this over here so let's just first import that so I'm gonna go over page.js and import that and then I will copy this line from here to our component like this so now we have this T which is a function available in our component and if we want to translate this word we will call that function with a string parameter saying which word we want to translate or which sentence so let's try it out so T and then we want to translate the title so let's save it and I'll switch to the browser and we can see the hello world still so this is important to note that we are not actually passing the whole sentence or word that we want to translate but we are passing as a parameter the key for that sentence or word that we want to translate and those keys are inside of the Json file right here so in here we wanted to translate the title and we can see that it gets the translation from here if we just add for example one more exclamation mark and save it as we the browser and I think we need to refresh the page for this so yeah so now it gets to exclamation marks and if we take a one more look at the use translation hook so with this hook we can get the translations and as a parameter we can define a scope which can be a component or other scope that you want to Define and in our case we are using indexed and why we are using index is because in our translation file we Define it right here so if this was something else we would use that in our use translation hook over here so now that we can translate some sentences let's see how we can change the language in our application so let me just write some code and let's go to it together then okay so what I did was to add this section over here so we still have our title rendered over there but then we are rendering two links which will have the text in English and in Phoenix and these are not actually next chains links but they are the next Intel links and if we quickly take a look on the next Intel documentation we can see down here we have the navigation and we can see that the link component actually wraps the next linked component so it uses the next link under the hood but what it does also is it adds this local prop that we can use so let's go back to the vs code and see our links over here so we are passing the href so we just want to go to the root of the website but then we are also passing the local and this is the part that will Define the new local that will be used so with our link with text in English we'll change the English and with infinix it will change it to finish so let's save this and go to the browser and see if it works so I'm gonna refresh the page and right here we have the in English and it finish links so let's start click the in English nothing happens because it's already in English but then if we click the in Finish we will actually get an error right now and that is because we haven't defined our finished translations yet so let's do that next so in our messages folder I will actually just copy this en.json and paste it in over there and rename it as if I Json and in here I will add the finished translation like this let's save it and now let's go to the browser and refresh the page and we can see our translation over there now if we click in English it will change it to English and in Finnish it will change it to finish and you can also notice that the local is added to the URL up here so now let's see if we wanted to add another word to our page or another sentence so right here we wanted to add a subtitle and we can do it like this and then save it and now if we go to the browser we can see that it shows the key for that translation and that's because we haven't defined that translation to our translation files yet so let's do that so I'm gonna open up the English version I will add that over here like this and then I will add also the finished version like this let's say both and go to the browser and we can see that our translations are now displayed so if I click English it shows thing in English and with infinix it shows it in Finnish that's great so that's how we can use translations with the server components but how about client components well let's take a look on the documentation of next Intel and actually down here they are already saying that if you are in a transitioning phase either from Pages directory to the app directory or from client components to server components beta you can apply this next Intel client provider additionally and this is one way to edit but we won't take a look on that in this video if you want to learn more about that way you can check it out from their documentation but what we are going to use is actually what they require meant in the server components section and what they are saying is that the best approach is to pass the labels as props or children from a server component and they have couple of examples over here but let's try that out and let's try to use the translations in client components by passing them as procs so I'm gonna switch back to the vs code and let's create a new component in our local folder and I will call this just alert message again dot JS like this and I will export a function from here like this save it and let's import it in our page.js up here like this and then let's use it let's say down here and let's save it and let's just see the browser so everything is working we are getting the message down here and I'm just gonna actually add one ber over there so we get some space like that okay good so we are getting the message down here and that's of course because we just render it rendered it down here and for our test we wanted this to be client component so let's add that use client up here let's save it and see that everything is still working looks like it but now if we want to translate this text over here the recommended way is to pass this as a prop so what I'm gonna do is add a message prop over here and then use that down here like this so we are getting the message to display as a prop and then we are displaying it over here and this is now a client component because we added the use client up here so I'm going to save this and let's go to the page.js and now we want to pass in that translation as a prop so let's add the message prop and that will be and let's again use the T function as before and let's say this is alert message like this save it and now if we take a look on the browser we can again see that it just displays the key or the name of that translation word or sentence so we still need to add that so I'm going to open up the en.json and at the alert message over here and let's say it was something went wrong like this save it and let's add that same to the finished translations like this let's save it not now see the browser I will refresh the page and now if we have English it says something went wrong and if we change the Finish it looks like it shows the correct translation so that's how you can use the translations in a client component by passing them as props and using the translation function in the server component so that's how you're going to add Internet analyzation to your Nexus 13 app using the app router and I know there are also bunch of other libraries that can help you adding the translations to your next application but I decided to use the next envelope because they already had support for the Nexus 13 app directory and not all of the libraries did have that I truly hope that you found this video at least somewhat helpful and if you did please leave a like and comment down below and if you're not already also subscribe to the channel so you won't miss out on new Nexus videos in today's video we will take a look on how to add dark and light mode to your next chess application we will first see how to add a team changer to your application and then how to display or manipulate the CSS based on the selected theme and then we will also take a look on how we can utilize this theme changer with Tailwind CSS so let's get started so first I will create the new next test application with create next app and I will choose no no for typescript no for eslint no foretail with CSS for now uh no for SRC then we will want to use the app router so yes and for this no and let's wait for it to run okay great let's open it up in vs code like this and I will just fire up the dev server to see that everything is working let's open the browser go to the localhost 3000 and let's see the application okay looks like everything is okay so just to make everything really clear I will create a very basic example of the changing of the theme so what I'm gonna do is open up the app folder then from there the page.js and I will actually clean everything from this page.js file like this and then I will just return a div with a paragraph saying hello world like this and I can remove these from up here and let's save it and switch to the browser and looks like we are getting the hello world text okay good so in order for us to change the theme and get the current theme we will use this next themes npm package so let's go and install it I will copy this from here go to the vs code stop the server and paste in the yarn at command like this so now we have the library added so I'm gonna yarn dip again so we get our Dev server back on and see in the browser that it's working looks like everything is okay great so let's switch back to the vs code and over here I will open up the layout file so with app directory this is the layout file and from here I'm just gonna delete this font stuff and then also from down here like this because we don't need those right now and then also open up the global.css file and just remove everything from here too so that's the file that we are importing up here okay so in order for us to add the theming for this application we need to import a theme Provider from next themes so let's do that like this and then we need to wrap our content down here inside of the theme provider so let's do that like this so let's save it and check out the browser so looks like we are getting an error saying that create context only works in client components and this is because our layout JS is now a server component and if we wanted to use this as a cloud component we would need to add this use client directive at the top of the file over here but that's something we don't want to do at the moment we want to keep it as a server component because there is another way to add this theme provider over here without converting this to a client component so let's see how that's done so what I'm gonna do is actually add a new file to our app folder called providers.js like this and over here I will import the theme provider so I will copy it from the layout and remove it from there and then I will actually just return a component from here like this and right now I'm just returning the children in a div but what we actually want to do is to wrap these children in a theme provider so over here I will replace this div with theme provider like this and now if I go to the layout.js I can get rid of this theme provider over here and what I want to do is import that provider's component we just created so let's do that like that and then let's wrap this children inside of that provider component like this let's save it and see if we still get an error so looks like we are getting an error it's the same error and actually this is because our provider's component is also a server component because we are not defining this as a client component so you remember that with app directory all the components are by default server components if we don't Define them as client components so in order for this to work let's make this client component like this so now our provider.js is a client component and we are wrapping the children inside of it and that way adding the theme provider for our application so let's save everything and switch to the browser and looks like we are getting a hello world so we got rid of all those errors okay so right now our text is black and the background is white and what we want to do is be able to change the theme so all this changes so the next step is to create a theme changer or this kind of switch or drop down that we can select the theme that we want to use so let's do that next I will go to the BS code and I'll create a new component inside of our app folder called theme switcher and let me just add some code over here and let's then go through it together okay so first in order to change the theme we need to import the use team Hook from the next themes and then over here we are just defining our theme switcher component and then using the use team hook to get the current theme and also to change the theme and then we render the current theme just as a text and then button for setting the light mode and dark mode so when clicked we are just calling the set theme function and passing in the theme as a parameter so this should be everything we need so let's save this and go to the layout.js file and I want to add this to the top of the page so we can see it on every page so let's first import it like this and then we can render it down here like this let's save it and switch to the browser to see if it works okay we get the client component error so we forgot to make this a client component so let's do that like this so let's save it and switch to the browser and let's see what we get okay so we get the current theme over here and the light mode and dark mode buttons but it looks like we have a couple of Errors so let's tackle those right now so we are getting an error hydration failed because the initial UI does not match what was rendered on the server so this error is actually because the theme is only known on the client side on the browser and when rendered on the server we don't know what the theme is so some of the values for the use team hook for example are undefined so we are getting this hydration error because of that and in order to fix this we can do this one thing that they actually mentioned in the npm page of the next themes over this avoid hydration mix mismatch section so the idea here is that if we scroll down a little bit over here they have a version of the theme switcher so what we can do is render the UI that uses the current theme only when the page is mounted on the client side we can do it like the list over here so let's add this to our application so what I'm gonna do first is go to the vs code and open our theme switcher and up here I will import the use date and use effect hooks like this then inside the component I will create a piece of State called mounted like this and it will default the false and then before the rendering part I will just add if statement checking that if it's not mounted return nor and also we want to add a use effect in which we set the set mounted to True like this and then the let's add the dependency error like this save it so right now when this component is mounted on the client side this use effect will be called and the set mounted set to true and then after that this part will be rendered and because we are on the client side we will know the theme already so it should work so this was the team switcher so one other place we need to add this same kind of logic is the providers so let me just do that and let's continue from there like this and one difference between this and the theme switcher one is that now when the component is not mounted instead of returning a null we will return the children wrapped with react fragments so this is the shorthand for react fragments okay let's save this and switch to the browser and see if we get anything in here so I'll refresh the page and looks like the errors disappeared and we no longer get any warnings down here either okay great so now it's time to do some styling so I will open up the globals.css file and in here I will add some CSS to style our light mode and dark mode so let's start with the light mode so I will just modify the body element for this example so let's do a simple one select color to set it black and the background color set it to White like this so let's add some styles for the dark mode too and how we can do that is by targeting the data theme and checking if that is dark and I will select the body also and here let's say we want to set the background color do black and color to Y so the opposite ones for the light mode let's save this and switch the browser and see what happens so now we are on the light team currently so let's click the dark mode and looks like the background goes to Black and the text stays white and if we got light mode it changes again so looks like our styles are working and the reason why the dark mode works so while we use this kind of syntax when targeting the dark mode Styles is because if we click right here and select inspect and check out the HTML element we can see that it has the data theme attribute with the value of dark and if we click the light mode it will set the theme to light so that's why we can Target the dark mode with this kind of syntax in our CSS and this is the default behavior of the theme provider and we will actually use different kind of behavior when we are using Tailwind CSS and I will show you an example of that in just a minute and one thing I want to mention is that if we take a closer look on this HTML element and when we change the themes we can see that the color scheme is also changing for the style attribute and what this does and actually let me open up a documentation so if you are not familiar with color shim it's a CSS property that allows an element to indicate with which color scheme it can comfortably be rendered in so if we set it to dark it will automatically use these dark values and with light the light values so actually if we change back to our application and go to the vs code and actually if we delete our styles from here and save this I think this should still work so let's refresh the page and right now it's the light mode but now if I go to the dark mode we can see that the dark mode is activated and that's because the color scheme is set to dark also When selecting the dark mode but just for example purposes so how we can Target the different themes I will leave this over here and of course we don't have to use these Styles so let's say we wanted to have the text as red when using the dark mode we can change it up here switch to the browser and the text is displayed red when dark mode and in light mode it will be black so if you need some custom CSS for your elements this might be the way you want to go with but if you just want to add this default dark Behavior you don't even need this CSS over here all you need is to add these providers.js and then use it in your layout.js file like this and of course at the team Twitter and you could make this nicer right now I just made it two buttons to make it easy and simple so this is how you can use the themes to manipulate the basic CSS so next let's see how we can set up this theme changer with Tailwind CSS okay so next let's see how to use this team changer with Tailwind CSS so what I'm gonna do is actually create a new Fresh next test application with Tailwind CSS so I will stop this server over here and go back to my terminal and right here I will just create a new next test application like this so I will hit enter and for this I don't want to use typescript neither eslint but for Tailwind CSS I will select yes and no for SRC is for app router and no here and let's wait it to run okay let's open it up in vs code like this and for this also I will just open the page and remove everything from here as we did last time and then just return it with a text like this and I will also just remove this import from here let's save it next let's start fire the dev server and see that everything is working I will switch to the browser and refresh the page and looks like we are getting the hello world and we are actually getting it as a dark team already and that's because my system theme is dark and this recognizes that and that way it shows the Dark theme already but next let's add the theme switcher we did earlier so I'm gonna go to the vs code and add the yarn at next themes and now we want to add the provider again so what I'm actually going to do is switch back to the first application and just copy everything from our providers.ts and switch back to the new application with Tailwind CSS and create a providers file like this paste in the code and save it and then for the layout I will switch back to the first application and just copy this whole layout also from here and then back to the new application select everything and paste in the code so now we are still missing the team switcher so let's do the same thing for that so switch to the all application copy the team switcher everything from there and then back to the new application create a new file for that team Switcher and paste in the code like this let's save it and now if we open the dev server and switch to the browser we are getting the hello world and the theme changer up here and it looks a bit nasty but these should be buttons so when clicked we are actually changing the theme as we can see so when we click the light mode the theme will be changed the light and with dark mode it will be changed to dark and let me actually switch back to the PS code and modify the team switcher a bit I will add line breaks over here let's save it see it again so now the current theme is dark with light mode it goes to light dark mode it goes to dark and we can see up here that the data theme is changing as it was earlier but now it's not working because with Tailwind we need to actually use something else so let's go back to the vs code and when using tile wind we need to pass for this team provider a prop called attribute and as a value for that we want to pass in class like this so let's save it and now if we go to the browser let's refresh the page so now when we change between the themes we can see that there is no longer a data theme attribute but there is now a class that is changed based on the theme so that's how Tailwind uses it and now we still have everything in Black so let's add some Tailwind styles to style our application so first I'm gonna actually open the global.css and I will remove everything from here except the Tailwind Imports up here so let's save it and let me just see in the browser if anything changes okay so now we are getting the light mode and dark mode when switching the themes and this is now because the color scheme style attribute so we are still not using the Tailwind but bear with me so now that we removed everything from the global CSS let's switch back to the page component so over here we have the hello world so now let's say we wanted to make this text red whenever we are using the dark mode well with the Tailwind CSS we can do that with classes so if we want to Target a dark mode style or add a style or add a class when the dark mode is active we can do that by typing in dark colon and then the class we want to add and for this let's add text red 900 like this so now whenever the dark mode is active this class will be applied for this D so let's save it and switch to the browser and we can see that it's now displayed in red since we have the dark mode active so let's switch to the light mode and we can still see actually that the text is red and this is because we still need to add one configuration to our application so right now the text rate 900 class is applied to this text whether or not the theme is light or dark so in order for us to have this dark theme working with Tailwind CSS we need to still modify the Tailwind config.js over here so let's open that up and inside here we need to add a dark mode attribute and set it to class so what this basically tells to tail with is that the dark mode information will be found from the class of the HTML element so now let's save this and switch back to the browser and what do you know now the text is black so if we switch to the dark mode the text is red and with light mode it's black so that's all you have to do in order to use the darker light mode with Tailwind CSS in this video we will build a to-do list application with next.js 13. by building this application we will learn about the app folder server and client components data fetching and data mutations and much more we will be focusing on the technical aspects of building this application so we won't be doing much of styling for example so let's get started so here I have a first next test application open and what I will do is actually delete the pages folder because we won't need that because we are using the app folder which came with Nexus 13 so we will add that and inside of that folder add a page.js file and from this file I will just export a function like this and let's save it and try to run the server and we get this error that we need at the experimental app there true to the next CS config file because right now the app there is still experimental so I'll just add that over there save it and try to run the server again and then switch to the browser and try to open up the localhost 3000. and looks like everything is working we get the hello text over there so for the structure of the application I'm thinking that at the top we will have a text input and a button that you can use to add to those and then below that we just have a list of those to-do's and for each to do we can mark it done with the checkbox or delete it with a button so let's switch back to the vs code and start working on that so I'll open up the layout.js file from the app folder and over here I will just add a heading for our application like this and save it let's see the browser yeah great and then I will switch to the page.js file and over here I will type some code to just demonstrate our application the way I just described like this so what I did here is at the top we have inside of this div we have the text input and the button and then over here in this div we have the list with some simple styling and couple of list items that represent the to-do so let's see how this looks and I think this looks good and for the checkbox and delete button I think we will add those later on so for now I think this looks good so this is the basic structure for our to-do list app so next what we will do is create own components for this input stuff and then these to-do's so let's start with the input stuff so I will create a new file over here called add new to do and inside of here I will export a function and then I will go to the page.js and just copy all this code and remove it and then paste it in here and return it like this and then we still need to use this component in the page so I will import it and then render it over here like this so let's try to save this and see if everything is still working looks like it is great so next I want to create a new component for this code over here and again I will create a new file and call it to do list and Export a function and same thing here I will go to the page and copy and remove that code and paste it in and return it inside of here like this and then let's import that also and then render it down here like this and see that everything is still working great so now we have separated this text input and button to its own component and this list of to-do's down here to its own component and this is kind of important well first of all it's easier to understand the application code right now but also because they are right now rendered as server components but later on we will actually need to render one of those as a client component so that's why it could also that they are separated to their own components so next up let's start to work on this to-do list component so as we can see at the moment we are just rendering some aesthetic to-do's over here but the goal is to actually fetch the to-do's from an API and then display them over here and for fetching the to-do's I actually have an API running locally that is running in localhost 3001 slash API slash to do slash list and as we can see it returns bunch of to-do's and this API also has other endpoints for adding to-do's updating to-do's and removing or deleting to-do's and this is the API we will use and if you want to follow along and check out this simple mock API also it's on my GitHub I will leave a link Down Below in the description but you can just go ahead to the repository click here and then copy over here and clone it on your own computer and then run yarn install yarn build and yarn start and that should work so this is the API we will be using for this to-do list application and let's start by fetching the to-do's inside of the to-do list component so up here I will add a new function for fetching the data like this so first we will use fits to make that API request and then we will return that response that the API returns and now we can use this function inside of the component so let's add it over here like this and then we also need to mark this function as a sync like this and let's actually log these to-do's like this so we can see that the request is working and we are getting the data so let's save this and go to the browser and refresh the page and right now we don't see anything on the JavaScript console and that is because this component is a server component because all the components inside of the app folder are by default server components if we don't Define them as client components separately so we need to look at the console inside of This Server so right here we can see that we got the data logged in so we got some to-do's from the API with ID name and is done property so that's great the request is working so only thing left to do now is to actually map through those two-do's and display them over here so let me just add the code for that like this so what we are doing here is mapping through to do's and then just printing a list element for each to do displaying the name so let's save this and switch to the browser and let's refresh the page and looks like it's working it's displaying the to-do's from the API which is great so next let's add the checkbox for marking the to do as done and then also the delete button for deleting a to-do so let me just edit them over here real quick like this and let's save it and check it out in the browser everything looks okay good so next let's add the functionality for this checkbox so we want to be able to take it to Mark T to do as done and when we take it we want to make an API request updating the server saying that hey this to do is done so in order to do that we need to add on change Handler for this checkbox so let's do that and for now I will just add an empty function to test this out so I will save it and let's switch to the browser and we can see that we get an error and this error is now related to the server and client components so whenever we are using on change Handler on click Handler or use date or use effect hooks for example we need to use client components but since we are only needing the on change Handler for this checkbox and eventually for this delete button we don't want to convert this whole component this to-do list component to a client component because in that case this API request would also happen on the client side and that way it wouldn't be good for the performance compared for this API request to be run on This Server so what we will do next is actually create a new component for a single to do item so let's do that I'll add a file over here let's call it to do and from here I will export a function like this and then I will copy the contents of the Li from the to-do list and remove them from there and then just return them from this component like this so let's save it and inside of the to-do list let's import that component like this and then render it over here and in order to display the correct name over here we still need to pass into to do as a prop for it so let's do that like this and then I will go to the to-do component and modify this so it uses the to-do prop like this so it gets the to-do as a prop and then for now we just use the name of that to do to this page over here so I'll save that and then of course we still need to add the use client statement for this to do component because it's a client component like this so let's save it switch back to the browser and refresh the page and looks like it's working again great so now that we have this true component created let's add the logic for the checkbox so that when we check it it will update the API that this to do is done so I will next add a function up here that will do the updating like this so we have this update function that will take the to-do ID and the Eastern value as a parameter and then we will use fits to make the update request to the API so the update endpoint is in my localhost 3001 API to do update and the method is post and then as a body we will pass in the ID and is done so next we just need to call this function in the unchange Handler of this tech box so let's do that next like this so we will call it with the to-do ID and then get the checked value from the check box so let's save this and actually see how it looks so I will go to the browser and I have the network tab open and let's click this one as done and we get an error and from the JavaScript console we can see that it's a course error so we can fix this by adding to our fits a mode property saying no course like this let's save it and refresh the page and then try to click it again and now we can see we got a request over here it's supposed to request and as a payload it sent the ID of the to-do and then is done through now let's check if the update was successful so I have the API endpoint open over here so I refresh the page and looks like it said the first to do is done as true so the updating is working but as we can see if we refresh the page the checkbox is unchecked again but if we check the API we can see that the instant is still true for the first to do so let's fix that next so we need to check a checkbox if the is done is true for that given to do so I'll switch to the vs code and for the checkbox I will add a check get property and set it equal to to do dot is done like this so now if the task is done the checkbox should be checked so let's see so I will refresh the page and looks like it is checked so that's good but now if I try to check another one so I will check this one nothing happens so the checkbox is not checked and that's because we need to refresh this list in order to show the updated information so how can we do this in next test 13. well if we take a look on the next JS docs we can see that the next jst is working on a new RFC for mutating data in next.js and this has not been published yet so for now they are recommending this kind of pattern that we use this router refresh function and they have an example over here so basically in the component we need to call this refresh function after we have done the update and we will pass that refresh function as a parameter for that data fetching function or the update function and the refresh function is actually coming from the next JS router so we are using this use router over here in the component and and we are importing the use router from next navigation so let's actually just Implement that and I think it's much more clear what we need to do so first let's import that use router from the next navigation okay and then we need to inside the component Define that router and use the use router like this and then we want to pass in as a parameter for that update function that router dot refresh function like this and then lastly let's add that as a parameter for the update function like this and then after the fetch request we want to call it so let's do that like this so what this router refresh function that we are calling over here does exactly is that it refreshes the current route without making a whole page refresh and that way the to-do list component will be re-rendered on the server and it will make this fetch request in the server and get the updated data with the correct values for the instance and for all of the to-do's so that way when the data is updated it should show a correct checked value for its to do so let's try it out so let's save this one over here and switch to the browser and just in case I will refresh my page so I have two check boxes checked so now if I try to check this one over here looks like it's working and if I try to uncheck some of these looks like they are working and if I refresh the page and check the API looks like everything is as it should so if I check that one and check the API the data is updated over here as we can see yeah so looks like our is done functionality is working so next let's add the functionality for the delete so I will switch to the vs code and over here for the delete button let's first add an on click Handler so when it is clicked something happens and for now I will leave it as an empty function because let's first Define that delete function what will be called when we click this so up here I will create a new function like this and as a parameter this function will get the to-do ID and then since we are deleting to-do's we probably want to do the same thing as we did with the update functionality and that is to refresh the data after the delete deletion is complete so we want to pass in the refresh function also and then inside of the function let's call that delete API endpoint like this so again I'm using fetch to call that localhost 3001 slash API slash to do slash delete endpoint and as a query parameter I'm passing the to-do ID that I want to delete and then we are defining the request method which is delete and after this we want to do the refreshing again so let's do that like this so let's save it and switch to the browser I'll refresh these page also and then let's try deleting this one over here so nothing happens and I think we forgot to hook it up on the on click Handler so let's still do that like this so we are calling the delete to do function and passing the to-do ID as the first parameter and then again the router refresh as a second parameter so now let's save this and switch to the browser and let's try to delete this one over here and we are getting an error and it's again saying about the course policy so let's add that like so I'll save it switch to the browser and let's try it again okay so now we are getting an error saying that delete is unsupported in no course mode so we can't do this method delete requests when the mode is set to no course so there is a couple of ways we can get around this problem and the way I'm thinking is by adding a rewrite to our next sales config so I'm gonna go to vs code and let's open up the next config JS again and I will go ahead and add a rewrite rule over here and then explain like this and if you are not familiar with rewrites you can read about them from the documentation more but basically what we can do with them is as they say here rewrites allow you to map an incoming request path to a different destination path so in our case it means that whenever we are in the client side calling slash API slash something so this index means that we will in fact call this hdb localhost 3001 slash API slash and then whatever was after that API slash in the source request so for example if we called slash API slash to do then it would route that request to localhost 3001 slash API slash to do so that's in short what that does so let's save this and whenever we are making modifications to the next config.js we need to reboot our server so let's do that and now what we still need to do is inside the to-do component when we are doing this delete request well first of all we need to move that mode no course because it wasn't supported with delete but then for the URL we don't want to call the localhost 3001 anymore but rather call just like this so slash API is less to do slash delete and then the ID so right now when we are using it like this it actually routes the request to the localhost 3001 as we defined in the next JS config over here so let's save this and let's try it out so I'll go to the browser refresh the page and let's try deleting this last one over here and at least it disappeared and if we take a look on the API and let's refresh it looks like the Middle Eastern was successful so if we also refresh this to-do list page we can see that the true was deleted so it's working and now that we have the rewrite configured we can actually also do the same thing for this update Route over here like this so I will save that and now if we check these checkboxes it will still still work because this request will be routed to localhost 3001 slash API slash to do slash update and for this also we can remove the course definition because that's no longer needed okay so now that we have modified this theater request in the to-do component you might also remember that hey didn't we do a request for getting the to-do's in the to-do list component over here and that's correct we did so why don't we use the slash API slash to do slash list without the localhost 3001 prefix so like this because now we made the rewrite and this should work so let's try it out so I will save this and switch the browser and as you can see we get an error so what's going on in here why isn't it working it says that failed to parse URL from API to-do list and the reason why this doesn't work in here is that this to-do list component is a server component so the request is made in the server rather than in the client so that's why we can't do this in the server component so the rewrite rule doesn't work in the server component and we need to use the static URL for it so with the localhost 3001 and then slash API slash all that stuff so that's one thing to keep in mind that again this is a server component and it's rendered on the server rather than this to do component is a client component and it will be rendered on the client and this fits requests will be done in the browser rather than in the server that's just something that I wanted to point out to you because I don't think it's really clear at first because to be honest I struggled with this for a while I was trying to understand why isn't it working and then I realized it that oh this is server component and that's why it isn't working so hopefully that will save some headache from you at some point but yeah now that we have our to-do component ready so we can check to Do's as done and then delete them only thing left to do for our application now is to actually the functionality for adding to-do's so let's do that next so I'll go to the vs code and to the add new to do component and let's start by adding on click Handler for the add button and for now I will just add an empty function over there let's save this and then check the browser and as you might have guessed we are getting an error and the reason for that error is that this component at the moment is a server component and we are using on click Handler over here so we need to convert it to client component so let's do that like this so now if we save it go to the browser and refresh the page the app is working again okay so for this on click Handler whenever the button is clicked we want to add a to-do so let's add a function up here that makes the API request that adds the to-do to the server let's call it add to do and as a parameter we just want to get the to-do name and then again after the to-do is added we want to refresh the data as we did with the update and delete so we want to pass in a refresh function as a second parameter like this then I'll add a filter request inside of here that makes the API request like this so again since this is client component we can use this shorter Syntax for the URL so slash API slash to do slash add is the end point and then as a body we want to send the name of the to-do and after the fetch is completed we want to refresh the data like this and then let's call this add to do function inside of the on click Handler so add to do and the first parameter is the name and for now I will just add a string over here saying that to do one and the second parameter is the refresh function from the router the next router so let's actually right now import the use router like this and then we had to still Define that router inside of the component with the use router like this and now we can call that router.refresh or we can pass it as a parameter for the add to do function over here like this and it will be called in the function after the fetch is completed okay so I will save this let's switch the browser and test this out so I will refresh the page and I'll type something over here and next I will click the add button and looks like we get a new to do over there but it has the wrong name and the reason for that is that we didn't send the value of this text input to the server but we sent the just the static text over here so let's modify this so that we also get the correct name so up here in the component I will Define a new piece of State like this and then I still need to import that huge state like this and then we still need to add on change Handler for the input like this so we are calling the set name with the input value and let's define a value for the input also and that should be the name like this and the last thing to do is actually use that name variable when we call the add to do like this so let's save it and switch the browser and try it out so I'll type in something and click the add and looks like we get the correct name for the to do and let's try to add another one looks like it's working so the name is sent correctly one thing we could add is that whenever we click the ad we empty this input so that it's easier to add another one so inside of our button on click Handler I will modify this a bit like this so what I did here was after the add to do we will set the name as empty string and just to make sure that we set the name after the to-do is added I made this on click Handler an asynchronous function with this and then we are awaiting the add to do before we are setting the name as empty string so let's save it and test it out so let's try to add something and click add button and looks like the to-do is added and the input is cleared so now we have pretty well functioning to-do list application over here and as I said earlier we won't style this any further from here because the focus of this video was on the functionality rather than the styling I really hope this video was helpful and you learned something from it and if you did please let me know in the comments and like the video and if you are not already please do hit the Subscribe button too I'll see you in the next video

Channel: Tuomo Kankaanpää

Views: 4,321

Keywords: next js 13 tutorial, nextjs, next js, react, nextjs 13, app router, app directory, server components, next js app directory, next js tutorial, tuomo kankaanpaa, james q quick, web dev simplified, javascript, next.js 13 tutorial, next js server components, nextjs react, next js 13 project, next js 13 fullstack, nextjs tutorial, josh tried coding nextjs, josh tried coding, app router react, next.js 13

Id: nLxp7AVAYQo

Length: 205min 2sec (12302 seconds)

Published: Thu Sep 14 2023