Primer on Next.js App Router Nested Layouts

Instructor: [0:01] Nested layouts in the app router are really simple. As we've already seen, if we come to our app, we have our nav bar and we have our dashboard page. If we come to our dashboard page, we aren't having to recall our layouts.

[0:17] The layout in the root directory gets applied to the dashboard page as well. The big difference now is that in this dashboard route, we can create another layout.tsx file. Here, we can export the function.

[0:42] We want to pass it to children. We'll return a fragment. Then we'll return an h1 that says, The Dashboard Layout. If we save this first and we come back over here and refresh, we'll see that all we're getting is the dashboard layout.

[0:59] If we now call the children prop and save it, we are getting the dashboard layout and then the dashboard page. Whatever we add in the dashboard layout gets applied to the dashboard page. It would also apply to any subroutes under the dashboard route.

[1:17] In review, we saw how simple it is to create a nested layout in theAapp router. All that we needed to do was come into a subroute, create a layout.tsx file, pass the children as a prop, and then in the returned markup, just make sure that we put the children in the markup as well.

[1:36] Having done that, all of the markup will be applied to the subroute page and any further routes created in that subroute.