Tutorial - 05 - Next JS | Next js layout hierarchy | Layout inside route group
A layout is UI that is shared between multiple routes.In this example i had implemented layout hierarchy in next.js.
● A layout is an ui that is share between multiple routes.
● There is one root layout that will be wrap all other layout and pages.
● Sharing depends on layout and route scope.
● Layout can be define using .js .jsx .tsx extension.
● Only the root layout contains html and body tag.
● Defining a layout inside route folder then layout will wrap the page ui.
● By default layout are server component but u can make it client component.
● You can fetch data inside layout using api call.
● But passing props or data from one layout to another or parent to child layout not
possible.
● If u wants to define custom layout ui for a specific route group you can make a route group
and define the layout and ui design there.