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.
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.
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.
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.
Top comments (0)