Nextjs 13 complete tutorial

okay guys so welcome back again so in this video we'll be doing a quick tutorial on Nexus 13 which is still in beta but I guess that the API won't change much since it's in beta right now so without wasting any further time let's dive into the tutorial so to get started with Nexus 13 you can use the automatic installation here and the commands provided here so if you're using npx then you can simply use this command which I'm going to use or if you're using yarn on pnpm then you can use this thing here so let's use this thing here and let's get started here so what I've done is this that I've just used this npx create next app at latest command with the experimental app because we need to check out all the experimental features of the Nexus 13. so once I did this I I provided in the name of the application and then what I like to use typescript I simply selected no and for eslander is limited selected yes and then I have created the project here and then when I'm inside vs code or I open the project here we see the different and layout of the next year's application so in this video I would be like comparing Nexus 13 with the Nexus 12 at certain times so if you don't know about Nexus 12 just ignore it otherwise you can see the differences between 12 and 13. so once you open this app inside vs code we see that we have this extra app directory and we have the pages folder also that is typical for an xjs application to create Pages inside your application since a next js13 provides you with incremental adoption that is you can use the pages folder also to create your pages or otherwise you can use the new way of creating pages that is using the app folder so if we have a look at the app folder we have a couple of files here that is the globals.css layout.jsx page.jsx and page module.css so to Define an index route inside your application what you need to do is that that inside your app folder you simply need to create a file called page.jsx and the name of the file has to be page.jsx that is you cannot name this page as index.jsx it won't work so to create a page inside this app folder what you need to do you need to create page.js6 and if we have a look at the page.jsx file we have this typical next GS boilerplate code here so what I'm going to do I'm going to remove each and everything from here and I'm going to write my H1 here and I would be simply saying it next year is 13 beta so if I save this we see that our application was running here or yep our application is running here by doing npm run Dev that is a typical Nexus command and on the right hand side we see that our application is running and we see this next 13 beta so if I if I do plus plus then I would be seeing this change here or I need to reload the page so this is the first basic difference between the 12 and 13 is this is this that you need to Define all your pages inside the app folder here so now if you are wondering that where is the underscore app.jsx file or app underscore app.t6 file it is present here inside this layout.j6 file so whatever Global globals you need to set uh or you you were you were setting inside your underscore app.jsx file in Nexus 12 hour earlier you can now do that inside the layout.js6 file so if we have a look at this code here inside the layout.jsx file we see that we have a typical HTML skeleton here with the head here and the body here and the HTML closing tack and then we spit out the children whatever is present inside this page.js6 inside this layout file so the beauty of this thing or the beauty of this approach is this that we can define a global navigation bar for our application here inside the layout.jsx files which we were used to do inside the underscore app.jsx file so what we can do we can provide in our nav bar here so we can see a nav like this and here we can provide in a UL like this and now here inside the UL I can create a couple of Li elements so let me create home and then I can create one more Li and this this can be pose which we are going to do in a moment and if I save this we see that we have this thing reflected here inside our page here so if let me increase the font size let me increase the zoom level here so we see that we get this home and posts Here and Now whatever page we are going to create inside this app folder that that would contain the navigation bar and now this children can be inside the main tags here that is the main HTML element here and now we have the children here nothing changes here so now if you want to create a new page inside our app folder what do we do we need to create a page we need to create a folder as the name of the page so if I create a new folder here so let me go to this app folder let me create a new folder about and we do not need to create a file called about.jsx to create a new new page inside this application as we were used to do inside the pages folder because we simply created a file called about.jsx and that would be the route called forward slash about dot forward slash about but here inside this 13 we need to create a folder called about and inside this folder we need to create a file called page.js6 and again we need we do not need to create a file called index.j6 we need to create a file called page.jsx and now let me simply create a functional component here and it would be called about page like so and if I save this and if I manually go to this about page we should see that page here so we see that we are on the about page which is reflected here and we are on the forward slash about thing here and This Global navigation is again coming uh coming up from this layout.j6 file so let me do a couple of things here so now before moving ahead with the post uh posts link here let me show you that how do we create links here so firstly initially we need to import link from next.js so next link like this so previously we need to wrap this home inside an anchor element or the attacks but now what do we need to do we simply need to provide in the href attribute here that is forward slash like this and we do not need to provide in the uh anchor surrounding anger tags here to this home it is automatically done by this new link element from from next link package here and the similar thing I'm going to do for the Post page also or the post link also so this should be link and then this should be wrapped the post thing here and the href would be equal to pause like so so if I save this so if we go to home we are on the home page if you go to post we see that we get a 404 error and now let's create a page called post so to create a page what we need to do as we did in the about page we need to create a new folder inside the app directory and we need to call it post like this and then inside this post directory I need to create a new file called page.jsx or TSX if you are using typescript so RFC and this should be called post page like this so if I save this and if I reload the page we see that we are getting this post page and the beauty of this Nexus 13 is this that every component we create here unless and until we explicitly specify that this client component every component is a server component that is that takes advantage from the react server component so that we can have the loading States we can have the error States and only the and only HTML is served to the client and no JavaScript unless it until if it is required before doing anything in the post page let me show you one more thing so if I go to the layout.j6 file and let me create one more link here that should take us to the about page so this should be about and let's call it about let's save it and if we go to the about page we see that we have the support page and now let's go to the about page once again inside the page.jsx file and instead of Simply rendering out this about page what I'm going to do I'm going to make an H2 here that should say about page so let me cut and paste it here and now I want to have a button and that should simply say click me like this and what do I want to do on click I want to handle it so let me simply show an alert called one two three so if I save this it would give me an error so let me save it and let me reload we see that we do not get any thing here on the page but if you open a terminal here we see that we get an error here that is event handlers cannot be passed into client component props so if we scroll up we need to specify or we need to make this page as a client page so for every JavaScript or if you want any interaction with the page from the user then you need to make the component as a client component currently this component is a server side component or a server react component but instead to use this on click event handlers or if you want to use any kind of a state inside this component that is if you want to use user State use effect or use ref or whatever use hooks you are you are going to use then you need to make this component as a client component and it is very easy to do that you need to Simply go at the very top of your file here and you need to Simply call say use client like this so if I save this and if I reload the p page we see the pages present here and let me minimize this terminal again so now if I click click me we see that we get an alert Here and Now whatever you write here that is whatever you write here inside this component that is any JavaScript you write inside this component this is served to the client over the JavaScript bundle but if this were not uh this were this were not a client page that is if it were only a page like this that is without the use client directive here at the very top then this is all server side components that is only the HTML is rendered to the client so this makes your websites very fast so now we see or what now we know that how to use the client components and server components so let's do something more that is previously we were used to have some get server side drops or get started crops or get server side params or get static prems or get static Parts not programs so how do we do that inside this Nexus 13 so it is pretty simple to do so for that I am going to use this API called this API Json placeholder API to fetch a list of 100 posts so if you go to this URL that is jsonplaceholder typical.com forward slash post we get a list of 100 posts and if we go to this route here forward slash the ID of the post then we get the individual post so that's what I'm going to use inside our application to show a list of 100 posts so we need you to go do this inside the page.jsx file inside the post folder because we want to display all the posts inside this post folder so what I can do I can write my JavaScript directly here that is I can directly make a query to my database or to my protected API or we can use any kind of API secret Keys here inside this post page until and unless we are not using the use client directive because if you are using the use client directive then the JavaScript bundle would be sent to the client but if not then this is all rendered on the server and only the HTML is sent to the client so what we can do we can say const response equal to 08 Fetch and this switch is the same phase that is used in the web API but it has some superpowers from next Js or rather Nexus provide some superpowers to the switch API from from this thing and now since we are using a weight here we need we can create this function as an async function so export default async like this and now we can call that route endpoint so let me copy it and let me go here and let me paste and now what I can do I can simply say const equal to avoid response dot Json like this and now inside the div tag what I can do I can keep it on the second line so H2 would be this post page and then I am going to Simply render out a pre-tag here just to show a Json list of all the posts so I can simply say Json dot stringify post comma null comma two so let me save this and we see that we get back a list of all the 100 posts here so let me minimize one size smaller so we see that we get all this posts here inside our post page and now what we want to have that is that that we want to click a click a link so that we can go to the individual post ID so that we can see that how to use slugs inside this folder or inside this post folder so that is again pretty simple to do so firstly let me let me let me remove it from here so here I am going to say post dot map then we have the individual post and then we want to return a div like this and then we want to have a link element that should and again link is imported from next link and this uh this div should have a key and this is all typical react stuff so post dot ID it would be the key and the href would be uh something so pose forward slash and here we need to use template string or template literal and here we can simply see and this again needs to be inside curly braces I suppose and here we can simply say post dot ID so that we can go to forward slash post forward slash the ID of the post and then here inside this thing we want to render out the index of the post so we can see post dot ID and then post dot title like this if I save this uh if I reload the page because this is all server side here we see that we get back a list of all the posts here are the titles here or all or or all the links here if I click any of the links here we see that we are getting a 404 error because that route is not created that is post and the ID of the post so what we need to do to create a slug inside this Force posts folder what we need to do we need to create a new folder here and again new folder not a new file and this should be called ID that is whatever params you are expecting you need to call that thing here that is inside box bracket so we are expecting an ID so we created a folder called a starting box bracket ID and closing box bracket so if I save this or we don't save this because we need to create a new file again inside this folder called page.jsx which would render out the individual post so again let me create a new functional component so post page or post post with our post with ID page like this and if I save this and if I reload we see that now we get this page here that is post with ID page so now to get the prop here that is the ID of the post here inside this page we can console.log the prop so if I save this and if I open up my terminal here and if I reload the page we see that we get this props here or this props object here that contains the params and the search params So currently the params contains the ID here and the search params does not contain anything but if I provided here any search params then that would be also populated here but we are interested in isn't this params so what we can do we can directly extract the params here or we can simply do it like this like this and here to fetch the individual post we need to again call that fetch API so what I can do I can create a new function here so function or this should be an async function so async function uh get post by ID like this and this expectation ID and here what we can do we can copy the previous fetch call from our previous page so let me copy this and let me paste it here like this and here we need to pass in the ID somehow so we can use the template string again and here we can see forward slash the ID of the post and then we can simply say const post equal to awaitresponse dot Json like this and then we simply return the post here and now what we can do to get the data inside this post page so let me minimize the size a little bit so here what we can do we can simply say conspost equal to 08 get post by ID and here we can simply pass in params.id that is the ID of the post and since we are using await here we need to mark this function as async function and now what we can do we can simply render out the free tag again once again and here we can simply json.stringify the post here so Json dot stringify post null comma 2. and just don't worry about this that whether these are get static props or get server-side drops because I would be coming to that in a moment so if I save this we see that we get this post here that is posted ID page and if I go back to this post here we click on this uh let's say 26 post we should be getting that 26 post that is this ID here so this is how this works and by default whatever call we are making here using this switch API inside this next year studying application they are all get static props that is this page is only generated at build time but what if you want to revalidate or you you want to revalidate the call to this uh to this link so that you get the latest data it is pretty simple to do you need to Simply Define and uh you need to Simply put an option here that is next and here you need to put in the revalidate property and let's say 10 seconds so every 10 seconds if a request comes in or a couple of requests comes in this page would be again created or this page would be again built so this is about this next revalidate thing that is pretty similar to get static props on our next js12 application but what if if you want to use something like the get server side props that is if you always want to call this function again and again whenever this page is being requested by the client that is something which is typically possible from the get server side probes because get server side props run on every page request so for that what we can you can do instead of providing this revalidate option you can simply provide in the cache option and here you can simply provide in no store so if I save this then this function or this call would be always run whenever a request comes to this to this to this post with ID page so this would be all always called and that is uh that is uh that is this next revalidate and this Cache no store is all present in the production uh production application and not in the development development application because in development even if you do not provide this then this would always be then this would be always called so this is about this thing and now if you're wondering that right now I'm using the fetch API and therefore I'm able to provide these options here that is next revalidate and cache no store like so but what if if you wanted to query a database somehow that is if instead of uh calling the fetch API directly like this we want to query a database using Prisma orm or we are using the mongodb database so how do we write all those queries and we can provide in these options that is revalidate and no store so for that it is pretty simple to do we need to go to the next next docs here uh we need to go so you need to scroll to the very bottom here and here you see that we have segment config options so here you have a couple of options and you can go through them and here we have that revalidate as false or otherwise you can provide a number here and then you can go to these uh go go through these options to read more about them and uh yep so it is pretty much self-explanatory if you just go through them so if you simply wanted to have this Force Dynamic that is uh if you want to use the get server side props that is run the function on each and every printer or query the database on each and every request from the user you need to Simply use the force Dynamic thing here inside this Dynamic export that is let me show it to you so If This Were a database call what you need to do you need to Simply instead of using this thing here because that is not present inside prism or mongoose that is only present inside fetch so if you if this were a call to a database somehow that is prisma.db.query so what you need to do you need to Simply say export cons Dynamic to be force uh Force renew I suppose Force Dynamic that is force Dynamic rendering and dynamic data fetching of the layout so that you can do here that is instead of Auto you can simply put in force Dynamics so then this uh what this call to the database would be run on every request from the user so that is something you can uh go and check in the docs and now let's come to this layout thing here once again because uh this is something uh something new here inside Nexus 12 that is how we can Nest layouts inside layout so we saw that in our main layout consists of this layout that is we have a top navigation bar and everything is rendered below that but what what what if we want to have a post page or a post layout with individual navigation that is only the post space should contain one more layout or one more as um or one more UI layout inside this post page and that should not be present inside the about plate the about page should only contain this navigation link that is a top navigation bar but the post page should contain more navigation link like maybe a sidebar maybe a right sidebar or maybe some top Tap bar or something like that so that is pretty simple to do so you need to go inside the post folder so let me increase the font size here so you need to go inside the post page or the post folder and you need to create a new file called layout.jsx and here what do we need to do we need to export enough functional component again so layout uh or let's call it post post layout like this and here what we can do we can simply say post layout and let me put in a couple of UL elements here or here I will I can say so some link I'm not creating a link here and let me some link to like this and this is again a server component that is this is again server side rendered you can make a call to your apis inside this uh inside this component directly you do not need to worry about API Keys being rendered to the client or sent to the client because this is all gen all rendered here on the server and then only the HTML is sent to the client so if I save this and now if I reload the page we see that we got this thing here that is if I go to about we see this about page we do not see that navigation this navigation thing here and if you go to the Post thing we see that we get this layout but our posts are missing inside this layout previously they were present here so that is because because inside your layout what you need to do you need to create some kind of div element or a main element or whatever element and here you need to render out the children like this like this and this children comes from here I suppose so if I save this or posts are present again that is all the posts are present again and this is something kind of similar to remix I suppose or there was an outlet there inside remix so this is something uh similar to that and if I go to this post uh fourth post page we see that we have this post layout here again which is not present inside the about page so this is how this layout thing works and you can Nest layouts within layouts and within layout so if you wanted to create one more layout inside this ID within this post with ID page that is if you want to create a third layout here or a third third layout right so inside this postwill ID page you need to Simply create a new file called layout.jsx so layout.jsx and here I can export in a functional component and let me simply say post not paste but post ID layout like this and here we need to spit out the children again so children so so here we can get the children so children and then here I am going to Simply read uh spit out the children so let me save this and if I reload we see that we get this layout again so this post ID layout which is only present inside this post with ID page but that is not present inside the post page post page only contains the post post layout but post with ID page contains a third layout here which I have not which only contains this title here or whatever it is and then we have the post with ID page so this is how you can Nest layouts within layouts and now let's see that how do we throw an error or how do we handle errors inside our application so that is pretty simple to do so let's go to the about page here let's go to the Post page here and what do I want to do I want to throw an error and I want to Cache that error so let's say uh instead of this thing so let's see that is if pose dot length greater than zero and this is only for demonstration purposes I want to throw a new error that is wow we have posts so wow we have some posts so this is only for demonstration so if I save this we see that we get this error here that is unhandled runtime error so what do we do how do we show an uh show a custom error page so it is pretty simple to do so we need to create a new file called error.jsx so let me create a new file called error.jsx and let me create a function components so post error like this so if I save this and if I reload so what happened here so we see that we do not see the thing here and it is because this error component needs to be your client component so we need to create this error component as the client component and if I reload we see that we get this message here that is post error but if we wanted to see the same message that we throw here that is wow we have some post we have one more prop coming in here and that is the error prop like this and here we can display in the error inside the paragraph so we can simply say error Dot message like this so if I save this we see that we have this message here that is wow we have some posts so this was only for demonstration purposes that is how do you show errors and again as you can see that it is thrown it is present inside your layout that is layout within the post layout and then within that you have this post error and the same thing you can do for the individual post also you can create a separate error page for this thing here and now let's see that how do we and once again I need to tell you that this these are all reserved reserved reserved names of files that is page.jsxlayout.jsx and error.jsx so let's let me show you one more thing and that is loading.jsx file so if I create a new file here that is loading.jsx so RFC create a new functional components so loading post and this should say loading post and here you can create your own beautiful UI to show a loading skeleton or something like that and if I go to this post page and I need to stop throwing the error from that page so let me comment it out so let me reload so if I go here we we saw a flash of that loading loading indicator there that is loading post so what we can do we can go to this ID of the post and before we return the response we need to wait for a couple of seconds to show the loading indicator so what we can do we can create an async function here called weight which results results in after some few seconds so you can copy so you can copy this code from here or you can simply use this code to Simply wait for a couple of seconds so before returning the post I can simply say await weight of let's say two seconds so if I save this and if I go to the Post page and if I go to any of the individual posts here we see that we get this loading post indicator so once again so if I go to this page we see that we get loading post and the same thing you can do for everything that is here we have this loading indicator or loading skeleton but for loading out all the posts that is inside this post you can have a different uh you can have a different loading layout so that you can show a loading indicator when all the posts are being loaded here so that's something you can try it on yourself or by yourself and now let me show you one more thing that is how to how to redirect to a not found page so that is pretty simple to do again I'm going to use this post dot length thing here so instead of throwing an error I want to show that user that this route doesn't exist so what do we need to do we need to import something so import something from next navigation this is a new package here that is from next next 13. so here we can simply use this thing here that is not found so if pose dot length is greater than 0 which is always there so I can simply throw a not found page just to show you that is how do we show our not phone page so if I save this and if I reload the page we see that next not found that is though we see all the UI here present here but we get this page here that says next not found and if I wanted I can create my custom error page here that is instead of next not found I can create a custom error a custom not found page so I can create a new file here called inside this posts folder I can create a file called not found.jsx and to get a list of all the reserved key file names you can go to the docs here and you can you can search it here some it is somewhere here that is what are the reserved file names so here you can see we have that layout we have the page we have the loading error we have the template which is still not out so that's what I won't be talking about and then we have the not found page here so so this is the convention here and here I can simply export in a functional component again so not found page like this and here I can see all posts not found so let me save this and if I reload the page I should be seeing this thing here that is all post not found that is we are rendering out this not front page but if you wanted to render out a different not found page for this post with ID page that is something here that is some different variation of this not found.jsx file you can do that here inside the IDE folder so now the last thing that is how how do we use module CSS here it is pretty simple and it is the same as before that is the way we were used to do inside the next J study that is we can use the module system module.css files so inside this file here what I need to do I need to create a new file so let me create a new file inside this post folder and here I can create a file called page dot module dot CSS like this and here I want to create a single class called uh BG all right that is background color to be red so only for demonstrations background red and now to use this page.module.css inside this page.js6 file what I can do I can simply import that file so import styles from dot dot pH module.css and here inside this H2 what I can do I can simply say class name equal to Styles dot BG red like this so if I save this I should be getting that thing so before doing so I need to remove this if block here so if I reload we see that we get the Styles here using module.csx file so it is pretty same as before so I'm not talking much about that so before we end up the video one more thing that is how do we locate our components that is individual component inside the application because we do not want to create a write each and every component inside the page.jsx file so there there are two ways to do that so let's say if you want to extract this component inside its own individual component so what we can do either we can create a new folder here called like the previous way that is components and then we can create a new file here called uh let's say post title dot post title link dot jsx like this and I can export in a functional component again and I can simply copy this piece of code from here and let me paste it here and here we can pass in the prop called post because we need that thing here and now we also need to import the link here from next link so this post title link is complete and now instead of returning here we can simply return out the post title link component so we can say post title link and here we can pass in the individual post using this post thing here and we can pass in the key so that would be post dot ID so if I save this we should not see any change here inside the application because we are using the post title link but there is one more way to co-locate your component inside the pages folder or the post folder itself so what I can do I can simply move this four file to our post folder because this post title link is required only inside the space.j6 file it is not globally required to any other part of the application if that is so so we can we can save this file here and if we reload the page we see that nothing changes here and we can see all the stuff here so this is how you can create your components either inside the components folder if you want to do that though it is not required to call this folder component this can be named as any any name by any name but that is a convention to call it components or otherwise next js13 provides you with a way to co-locate your components within the page or with the page folder in which they are required so I created this post title link inside the post folder itself so the same thing you can do for the post with ID page that is if you want to use a component here that is only available to this ID page you can create a simply you can simply create a file called whatever name you like for that component to be and you can place that file here because next.js only renders out this space.jss file whether it is present inside this folder ID folder or post folder that is this folder and yep so that's all about this tutorial guys so it's still in beta so I have not recovered each and everything but I have almost covered each and everything to get you started with Nexus 13 beta so that's all about this video guys so if you like the video do hit the like button and if you haven't subscribed to the channel till now do subscribe to the channel so thank you bye bye Tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 6,908

Keywords: yourstruly, nextjs 13 beta, how to use nextjs 13, nextjs

Id: gMB8Uk8iOXI

Length: 37min 48sec (2268 seconds)

Published: Wed Nov 02 2022