How can we nest layouts?

We have a simple blog page under /app/blog/post/[id]/page.js and we want a header that appears on every page of the site. How would you add a layout to achieve that?

If you place a layout.js file in /app/blog/ and another one in /app/blog/post/, which layout renders first and why?

You added a new sidebar layout under /app/dashboard/layout.js, but the sidebar disappears on some nested pages. What could be causing that and how would you debug it?

Our team wants the dashboard layout to fetch user permissions server‑side before rendering child pages. How would you modify the nested layout to support that without breaking other pages?

Explain the performance trade‑offs of deep nesting (3+ levels) of layouts in a large SaaS app. When would you consolidate layouts, and what impact does it have on caching and revalidation?

We need to share a global theme context across all layouts, but some nested layouts also need their own context. How would you structure the providers to avoid context clashes and unnecessary re‑renders?

Our product is migrating from pages/ to the new app/ router across many micro‑frontends. How would you design a strategy for introducing nested layouts gradually while keeping backward compatibility?

Consider a multi‑team environment where each team owns a feature folder with its own layout. What conventions or tooling would you put in place to ensure layout composition remains predictable and doesn't cause CSS or state leakage?