Next.js Layouts Made Easy: Complete Guide with Nested Layouts

GitHub: github.com/cod...
Learn layouts and Nested layouts in modern Next.js!

[@xreed8]

How to properly implement layouts with pages that are completely different typically from the rest of your pages? For example, login/sign up page. Login page typically doesn’t have a nav bar for example (let these pages without the need for a navbar be set x), but all other pages in your web app for example would have the nav bar (set y). Would you hence have to nest pages/layouts for set y separately from set x, such that you have a separate parent layout for nested directories for set x, and another parent layout for nested directories for set y? This would allow you to import for example your navbar component only for set y. And You obviously wouldn’t want to just overlay the login page over the top with CSS since the DOM elements and info you are protecting would just show up in dev tools.

[@ramonmaximiliano3557]

Wonderful, thanks

[@coderyan]

You’re welcome!

[@devv_alexx_YT]

How do you customise your layout depending on which child is active?