The latest articles on DEV Community by Sujoy C. Das (@dsujoydev). https://dev.to/dsujoydev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1094822%2F86341bc1-dc31-4e88-b389-71a1b4cf1006.jpeg https://dev.to/dsujoydev en Sujoy C. Das Sat, 03 Jun 2023 12:43:00 +0000 https://dev.to/dsujoydev/nextjs-rootlayout-and-nested-layouts-on-routes-a-beginners-guide-2583 https://dev.to/dsujoydev/nextjs-rootlayout-and-nested-layouts-on-routes-a-beginners-guide-2583 <h2> Past week has been exciting with NextJS. Tried to learn and make a website in a parallel way. So let's dive into what I learned about Next so far. The first exciting thing is layout.js and routing. </h2> <p>The most common requirement of any modern website is, it will have a consistent header and footer all just like the first image. The rootlayout function easily handles these reusable components (ex: Navbar.jsx, Footer.jsx) by just declaring it in the layout. And it passes others' contents, routes as 'children' props wrapped between the navbar and footer. That's how content becomes dynamic, and changes over routes. </p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdy3zh0llewhapr7b3t03.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdy3zh0llewhapr7b3t03.png" alt="Root Layout"></a></p> <p>Now my requirement for this website was to develop a sidebar as well. Numerous categories will be there in the sidebar menu to navigate them. I will discuss the dynamic routing/navigation in the next part. But the tricky condition was that the sidebar will consist in a specific route (ex. products), not in other routes (ex. ./ or /about). As I am following folder-based routing, the 'products' folder will need a layout.js file to handle the tricky situation easily shown in picture 2. </p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbprvw46pdy4zoub5w5u.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbprvw46pdy4zoub5w5u.png" alt="Image description"></a></p> <p>layout.js under products will have the ProductsLayout function which will exactly behave like Rootlayout. It will have a persistent Sidebar all over products/categories routes but won't be in other routes and will get other dynamic content as a children prop. So yeah, that's some magic. You can handle any static portion of the route or page with a just layout file inside the folder.</p> webdev react nextjs frontend