The layout.js Convention

Share UI across pages without destroying state on navigation.

Next.js5 min readConcept 6 of 65

What is a Layout?

In Next.js, a layout.js (or .tsx) file is used to define UI that is shared across multiple pages in a route segment.

If you place a layout.tsx file inside an app/dashboard folder, its UI (such as a sidebar or header) will automatically wrap every single page nested within the dashboard.

Persistent state

The true superpower of a layout is that it **does not re-render on navigation**. When a user clicks a link to move from /dashboard/analytics to /dashboard/settings, Next.js only swaps out the inner page content.

The outer layout stays completely untouched. This means any state inside the layout (like an open accordion, a playing video, or scroll position) is perfectly preserved, resulting in a buttery smooth, app-like user experience.

The mandatory {children} prop

To create a layout, you export a React component that accepts a children prop. You must render this {children} prop somewhere in your JSX.

Next.js handles the heavy lifting behind the scenes. When a user visits a URL, Next.js takes the active page.tsx, turns it into a React node, and passes it into your layout as the children prop.

Layout Persistence

Navigate between the tabs below. Notice how the inner page swaps out, but the outer layout (and its state) stays exactly the same.

layout.tsx
{children}
New Render

Analytics Page

Type some text into the layout's search bar, then click the sidebar links to navigate. The inner {children} page swaps out, but the outer layout never re-renders, preserving your typed text perfectly.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens to a layout component when a user navigates between two pages that share it?
  2. 2What is the single strict requirement for writing a valid layout.js component?

Remember this

  • A layout.js shares UI across all routes nested inside its folder.
  • Layouts preserve state and do not re-render when navigating between sibling pages.
  • A layout MUST accept and render a {children} prop.
  • Do not try to pass props from a layout to a page; rely on Next.js request memoization to fetch data multiple times efficiently.

Done with this concept?

Mark it complete to track your progress. No login needed.