Managing Shared UI with Nested Layouts in Next.js

Previously in this course, we covered Understanding the App Router Architecture to map files to URLs, and Building the Root Layout to define our global HTML structure. Now, we’ll move beyond the root level to manage shared UI components using nested layouts.

In a professional blog, you often need specific UI elements—like a sidebar containing categories or a table of contents—that appear only on certain pages. Instead of repeating code in every page.js, we use nested layouts to wrap specific route segments in a shared UI.

Understanding Nested Layouts from First Principles

In Next.js, a layout.js file defines the UI that wraps all pages within its folder and its children. When you place a layout.js file inside a sub-directory, it creates a nested layout.

Think of it as a set of Russian nesting dolls. The root layout is the outermost shell. When you navigate to a sub-route, Next.js renders the root layout, then injects the nested layout inside it, and finally renders the specific page content inside that nested layout.

This architecture allows you to maintain state and visual consistency across a group of routes without re-rendering the common UI components when navigating between them.

Implementing a Nested Blog Layout

Let’s advance our blog project. Currently, all our pages share the root layout. Suppose we want all blog post pages to share a sidebar containing a "Recent Posts" list, but we don't want this sidebar on our home or contact pages.

1. Navigate to your app/blog folder.
2. Create a new file named layout.js.
3. Define the layout structure.

TSX
// app/blog/layout.js
export default function BlogLayout({ children }) {
  return (
    <div className="flex">
      <aside className="w-64 border-r p-4">
        <h2 className="font-bold">Blog Categories</h2>
        <ul>
          <li>Next.js Tips</li>
          <li>Web Performance</li>
        </ul>
      </aside>
      <main className="flex-1 p-8">
        {children}
      </main>
    </div>
  );
}

When you navigate to /blog/my-first-post, Next.js automatically wraps the page.js content of that post within this BlogLayout. The root layout remains the parent container for the entire application, providing the global navigation and footer.

Managing Layout Nesting

The power of this pattern lies in the children prop. Each layout receives the children prop, which represents the next nested segment (either a page or another layout).

If you need to nest even further—for example, a dashboard area with its own specific tabs—you simply add another layout.js inside the app/dashboard directory.

Hands-on Exercise: Add a Sidebar to Your Blog

1. Inside your app/blog directory, ensure you have a layout.js file as shown above.
2. Add a <div> around the sidebar to apply specific background colors or spacing using Tailwind classes (covered in Styling with Tailwind CSS).
3. Verify that navigating between different blog posts keeps the sidebar static (it won't flicker or re-render), while navigating to the home page (/) removes the sidebar entirely.

Common Pitfalls

• Forgetting children: Every layout must accept and render the children prop. If you omit it, the page content will simply disappear.
• Over-nesting: While powerful, don't create a layout for every single folder. It adds complexity. Use nested layouts only when a significant group of pages needs to share common UI.
• Mixing Client/Server Components: Remember that layouts are Server Components by default. If your sidebar needs interactive elements (like a search bar that requires useState), you must add the 'use client' directive to that specific component file, not the layout itself.

Frequently Asked Questions

Does a nested layout replace the root layout? No. It renders inside the root layout's children prop.

Can I pass data from a layout to a page? Layouts cannot pass data to pages directly via props. To share data, use React Context or fetch the data directly in the Server Component.

Does changing routes re-render the layout? No. Next.js preserves the layout state, meaning the component remains mounted and doesn't re-render during navigation within the same segment.

Recap

Nested layouts are the key to building scalable, consistent UI in Next.js. By isolating shared components like sidebars into layout.js files, you keep your codebase modular and your user experience seamless.

Up next, we’ll learn how to improve perceived performance by implementing loading.js for automatic skeleton screens while your data fetches.