Nested Layout with App Directory Using Next.js 13

hey everyone and welcome back to daily tuition in this video we are going to learn how to create these nested routes with next 30. we're going to understand how to update next application from 12 to 13 version and make this beautiful nested layout with Kelvin CSS so let me just first set up next just 12 version and then upgrade that with next.js 13. so I'm going to open my vs code and here I'm going to open my terminal inside this terminal I'm going to execute a command called npx create next app then specify hyphen iPhone JS because we are using JavaScript iPhone F1 eslint and then we specify the name of the project so we specify here name next latest app now that's about you you can specify any name to this project this is going to create a new folder inside this vs code so enter into the project directory first OCD into latest app inside this Nexus 12 we have this page folder and inside this page folder we are going to have all the routes of this project but in next 13 we can create the app directory and create all the server components and create another route section of the project next just 13 introduce a new file system based routing built on top of react server component with the support for layout nested routing loading States error handling and more we can do that with the app directory now let me show you how you can upgrade this version to next.js 13. so you have to open your terminal enter into your project directory and here you have to say npm I4 install and you have to upgrade the next package to specify here next at the rate latest then you also need to update the app so we pass react latest and you also need to update the app Dom so we pass here react home latest and just for that you also need to update the eslint so we call eslint config dot next we also need the latest version of this package so we call here latest when I press enter this is going to install and update all these packages so if you can notice here in the package.json this will update all this packages you can notice and now if you're back to the package.json then you'll notice here we have the next 13 version we have the next 13. now we can use the app directory inside this project so select the project and in the root directory we create the app directory the app directory Works alongside the Pages directory and allow for incremental adoption this allows you to opt some routes of your application into a new Behavior while keeping other routes in the page directory for previous Behavior routes across directories should not resolve to the same URL path and will cause a build time error to prevent a conflict by default components inside this app directory are react server component however you can also use client components inside this app directory as well this app directory is just like the pages directly the folders are used to define routes a route is a single path of nested folders following the hierarchy from the root folder down to the final leave folder files are used to create UI that is shown for the route segment to create nested routes you can Nest folders inside each other now inside this app nextges provide a set of spatial files that can use in your routes so inside this app we are going to create two files first is page.js this represents the UI of his route and we're also going to create a file called layout where we call here layout dot JS now keep in mind these are the special files of the Nexus application so it means next.js will automatically identify these files and use it you don't have to change the name of these files otherwise Natures won't recognize it so page is used to specify the default UI for this app route and a layout file is used to define a UI that is shared across multiple Pages a layout accepts another layout or a page as its child you can Nest layouts to create nested off messaged out so now inside this page let me first create a simple function so we say export default function the function name is page now that's upon you you can specify any name to this function so we specify here name root page and then inside it I'm gonna say return and in the H1 heading tag I'm simply going to say Hello nextges app folder root brow now this page is a default UI file in the app directory just like the page index.js just like this file when you start the development server of net.js you will have this index.js as a default file the same way app use page.js file now let me save the changes and show you the result first and I'm going to say npm run div to start a development server if I start the development server then you'll notice here if I open this localhost 3000 I'm going to open the pages index.js file this is because we didn't initialize this app folder so once you create this app folder and create both these files inside it you need to inform next.js13 that we are using the app directory inside a project because next 13 is in the experimental phase to make your application work you need to add a property inside the next config.js file so open the next config.js right down here you have to add a property call experimental and in the object you have to specify app directory is going to be true so you have to tell Nexus 13 that we are using App directory inside this project so we call this statement say the changes and then you have to restart your development server so we're going to stop the development server and restart it now when I restart the development server you're going to get an error message and click app and page file was for what you have to do is you have to delete the index.js file or the page.js file from this folder now because we are using the app directory I'm going to delete this index.js file so let me select this and delete it once I delete it let me just restart the server again there we go now the server is started successfully now if you try to execute your application then you won't get anything if you open inspect tool then inside this body you can notice you don't have anything here and inside the console you will get an error message this is because you have to create layout to your application so you can import all your components inside it so let me just close this config file and inside this layout let me just specify layout to my application I'm simply going to say export default function the function name is root layout and this is going to destructure children from the component so I'm going to say here return and here I'm going to call HTML and here I'm going to call a body and inside this body I'm going to specify all the children so we call here children something like back to the project and reload it you can see now I'm gonna have hello Nexus app folder root drop now you can use the same layout to all the components now let me set up Kelvin CSS so let me just open the telvincss.com and here I'm going to install Kelvin CSS so let me just install 11 CSS post CSS and auto prefixer once we have that execute a command called npx Delvin CSS FNP I'm going to execute npx7 cases init hyphen so this is going to create post CSS and Telvin config file inside the project just out of that once you have this let me copy all these three statement and specify that inside of the Telvin config file right yeah just start that just copy open the Styles inside the Styles we have globals.css get rid of all the score we are not using it specify element directives here scroll down and here we have the H1 heading tag let me copy it and specify that to this page right here now if you back to your project then you won't see any changes to your H1 heading tag this is because I don't have this global.css file imported anywhere in this project so at the top inside this layout right up here I'm going to create a simple command and say import Delvin CSS in the single code we specify double dot or slash then specify the Styles folder and inside that we have global.css file we're going to have the styling of Kelvin CSS to this H1 heading tab now let me just add a font family right up here so inside this global.css at the top let me add a font family so I'm going to import the URL here and right down here I'm going to say star and select all the descendant div elements and then specify font family so I'm going to grab this import statement from the Google font and specify that onto all my elements so the question is back to the project and you can say I'm going to have this font family to this place let's understand how to create nested routes in the Nexus application we're also going to have a special file called Head so to specify title to your application you can call a file head dot JS and inside this file you can simply export default function with the name head and right from this function you have to return you are going to return a title instead app and if you want you can add here a link tag and add your icon here the head is used to specify title your page so you can notice here at the top we have a title of this page nested app these are that let me close all these files and let's create a nested drop so what we are going to do is we are going to create footer header Main and sidebar folder so each folder represents a new route so inside this app here we first create footer and inside this app again we create header inside this app if we hit Main and at the last we create sidebar now each folder represents a new route so it means if we are under vote route so let's suppose we are on the localhost 3000 then this 30 000 is represent the app directory then if you want to access the footer route you have to specify localhost 3000 footer and this is going to represent the footer directory and so on so if you try to access the footer if I say here footer then you won't get anything you'll get 404 the page could not count this is because we don't have any file or the default UI inside this footer so let's create a default UI inside this photo if I create here a file called page dot JS if I copy and paste the footer component something like this reload the browser then you'll notice I'm gonna have the footer to this footer and I'm going to do the same for the header as well so I'm gonna create here a page dot JS and right inside this page I'm gonna paste the component right inside this component you can notice I'm gonna first import a link component from next link and then use that right inside this header in Nexus 13 we have two ways to navigate between routes using link or using use router for this example we're going to stick with this link component so we import link component create a function and inside that we have a header with some telephone classes and the link component and this refers to the Home Route so we specify here hrf specify the Home Route and specify some classes to it and the text is going to be navigation menu back to the project and reload it you won't get anything but if you're back to the header if you open the header route you can see you're going to have your header here so when you open the footer you're going to get your footer when you open your header you're going to have your header here now just after that let me close these files and create the sidebar so inside the sidebar let me just create page dot JS and inside this I'm going to copy this page and specify that right here let me just change a few things here instead of header I'm going to specify aside and then specify some development classes here so I'm going to copy and paste some Delvin classes here just how that inside this aside I'm going to put a link tag with the text main with sidebar and now if I open the sidebar if I open here sidebar you'll notice I'm gonna have my sidebar here now to start that let me assemble all these components and create a main page of this application so instead of this text let me just print all these components and create a nested layout inside this application so I'm simply going to first open the layout.js file of this app folder and just for that right up here I'm going to import header from order slash header file inside the header we have page so I'm going to import my page right here and import from footer page.js and I'm going to import this right inside this layout inside this root layer so right here inside this body here I'm going to add a division tag and to the Steve let me specify some classes so let me just add here first a command and say app components and right down here inside these classes I'm going to call container MX Auto to center it dividing by 10 to specify top and bottom padding and then I'm going to specify Flex let's column and GAP Gap is going to be 4. and inside this div I'm going to add my header first so we first add here a header and after this header we're going to have my children's so we call here a children and after that we have the footer so this is the structure of this main page you can see I'm going to have the structure of this page something like this at the top you have the navigation menu at the center we have the main page and just for that we have the footer now let's back to the app page right here and let's create this main application page so what I'm going to do is at the top let me first import a link component from next link get it off this return statement and here I'm going to return a division tag and specify some relevant classes here so we call here grade calls one then call gap2 and then I'm going to specify h yphen and then specify value to the division tag so we specify 700 pixel height to this day this are that inside this div we're going to have another div with some children classes so we specify here BG Sky 500 justify Center and items Center this will Center all the content and after that here we have the main component and to this main component I'm going to specify class name text Center and inside this main here we have H1 heading tag with the text home page component and to this H1 heading tag let me specify some classes text 3 Excel and then specify text select 200. just out of that inside this main we call the link component and then specify each rep attribute which is going to be the main route so we're going to redirect the user to the main route when the user click on this link and just for that we specify some class names here and then specify here text main component and you can see you're going to have to project something like this so this is the main page of this application when the user click on this main component it's going to navigate you to the main route right now I don't have any default files to this main route so it's not going to display anything because I'm going to back to my root route so I'm going to open the main folder and right here I'm going to create page dot JS file I'm going to Simply first create and say export default function the function name is page that's upon you you can specify any name to this function and write from this function I'm going to return some Kelvin classes so I'm going to say create grade call 6 I'm going to create six columns inside this save then specify some Gap to it and specify height to it and just for that right here I'm going to create my first column so we call here a div with the class name all spawn you I'm going to specify two column space to this division tag using this plus and right inside this I'm going to call the sidebar so at the top right up here I'm going to say import sidebar form single code dot or slash slide bar forward slash page and I'm going to call this sidebar right here and just after that here I'm going to call another div I'm going to call some Talent classes here like this and inside that I'm going to call my main tab that we call here Main and specify some class name that we call here class name grade calls yo and here we call the Nest there components let's change this and now if I click on this main link oh I think I misspelled something here import sidebar oops I need to specify here dot again share the changes and you can see you're going to have the results something like this we have the main navigation menu then we have the sidebar and then we have the main content when you click on this main with sidebar this will open the main tag if you back to the root route you're just going to have the main component and when you click on this main component with sidebar this will open the main route and in the main route we have the sidebar with the main component then we have the navigation menu and the footer now inside this main component I'm going to create the nested drops so inside this main folder I'm going to create two route so I'm going to create a new folder with the name analytics and I'm also going to create a folder called settings in the analytics we create page file so we call page.js and in the setting we're also going to create a file called page dot j now inside the setting page.js I'm going to paste a function with a division tag and to this day we specify powder text Center and specify the background color specify some height and margin say that we have another div with the flag this device center item Center and specify the full width and inside that we have a division tag and then we have the H1 heading tag with the text analytics component and then we specify a link component with the href attribute Main analytics save the changes let me copy this page open the setting page and paste this function and instead of analytics now I'm going to say settings component and do the same right here as well I'm gonna say settings save the changes and now at the end at the top don't forget to import a link from next link and do the same inside this analytics page as well right up here that is file open the browser and if you type here analytics and search for it you can see you're going to have your analytics component and you can do the same for settings as well if you have your settings then you're going to have your settings component now what I want I want this analytics and this setting components inside this main component so what I'm going to do is I'm going to back to the main component I'm going to open the main page.js file and right here inside of this Nest set I'm going to import both these components right up here I'm going to say import analytics from dot forward slash specify analytics and page and do the same or the settings as well so we call here settings form dot forward slash specify settings and call page file and let me copy and specify both this component right yeah I'm going to import both these components inside this Main section back to the project and you can see I'm going to have my nested layout you're just going to have your main component if you open the main route you're going to have sidebar with the main section if you open the analytic it will just going to print the analytic component and if you open the settings it's just going to print the settings component now once you understand how you can Nest a component let me show you how we can add a size bar to the setting page so if we open the setting component then you'll notice we're just going to have a setting component here let me change this text let me just back to the settings page let me change this to settings and change this analytics to settings and open the settings page and now let me add a sidebar inside the settings page so instead of adding sidebar inside this page you can create a layout file so here you can create layout.js and inside this file if you import sidebar from double dot forward slash double dot forward slash then specify sidebar page and if you say here export a default function sidebar layout with children's something like this then from here you can simply return a division tag and with this div you can return some development classes so if I return some television classes right from here and create another div with the sidebar something like this and then after that I'm going to create another div with the call spawn 4 and inside that if I call all the children's backup project then you'll notice inside the setting page we are going to have the sidebar so using this layout you can nest and specify layout of your component now next is 13 also introduce a suspense component suspense component is a react component that display a fallback until its children have finished loading so the suspense component is useful when the component takes some time to load plus you have to do it inside the sidebar so to create a new file called loading this or that here I'm going to say export default function the function name is loading and inside this I'm going to say return and then I'm simply going to return H2 heading tag with the text sidebar is loading this are that if you back to your project and reload it you won't see any effect so what you have to do is you have to add some delay to this sidebar execution so to do that I'm going to create another file here called delay dot JS now that's upon you you can specify any name to this but inside this file I'm going to create a constant variable delay is equal to then I'm going to call here delay millisecond and from this promise I'm just going to say resolve and return resolve result so we call here resolve set timeout we are going to call here a function of JavaScript which is set timeout and here we call resolve and inside this we call resolve and the delay millisecond this parameter and just for that write down here I'm going to export default or sync function delay component and here I'm going to say await delay and specify the millisecond which is three thousand and then I'm going to return a simple H4 heading tag with the text display delay component say the changes back to the sidebar page right here and at the top right up here you have to import suspense from the react and just out of that right down here you have to import delay component and you have to import the loading component so inside this side right here you first call the suspense component and you specify the fallback value to the suspense so the fallback value of the suspense is equal to the Loading component so we call this loading right here and inside this I'm going to add a div with H1 heading tag and then I'm going to print some text here like this after that don't forget to call this delay component so we call here delay component and then call this link component record this link and specify that right here that's it loading status is now ready you can see we're going to have here a message sidebar is loading and after three seconds we're going to have the sidebar so whenever we restart the application we are going to have this loading message here and we are going to do the same for all the components of this Nexus application so let's suppose that you want to do the same thing with this analytics component you want to display a loading message to this analytic when you restart your application you can create a new component inside this analytics or you can reuse this loading and this delay component so what I can do is I'm going back to the page right up here I'm going to say import suspense from react and then I'm going to import delay component and import loading component from the sidebar and inside this div right here before this div right up here I'm gonna say suspense I'm going to call a suspense component like this to the suspense we need to First specify the fallback value so we first specify here loading like this and then inside this I'm going to call this division tag just like this just after that just before this link or after this link that's upon you you can call the delay component this one that's it reload the browser you can see we're going to have the same result for the analytic that's it I hope you understand how to work with nested layout in nextges.in if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one [Music] foreign [Music]

Channel: Daily Tuition

Views: 7,815

Keywords: Nested Layout with App Directory Using Next.js 13, next.js 13, understand how next 13 work, app directory next 13 application, next 13 application, working with next 13, next 13 tutorial, nested routes with next 13, next.js 13 nested routes with tailwind css, setup next.js 12 from 13, setup tailwind css in nextjs 13, next.js, nextjs, next13, next 13

Id: l0kHyQBs69M

Length: 28min 19sec (1699 seconds)

Published: Tue Dec 13 2022