Next.js Layouts: Shared UI That Survives Navigation
Think of a Next.js Layout as a picture frame that stays put while you swap the pictures (Pages) inside. It defines shared UI like headers that persist across routes, preserving state.
Why it exists
In web apps, certain UI elements like navigation bars and footers are consistent across many pages. Re-rendering these on every page change is inefficient and causes state loss, like resetting a user's scroll position or clearing input in a search bar. Layouts solve this by providing a file-system-based convention for persistent UI that wraps page content.
The mental model
A Layout is like the shell of your application—the navigation bar, sidebar, and footer. When you navigate from /dashboard to /dashboard/settings, the "picture" inside the shell changes (the page content), but the shell itself remains mounted and unchanged. This means any state within the layout, like a search bar's text, persists.
How it works
You create a file named layout.js (or .tsx) in a folder within your app directory. This file must export a default React component that accepts a children prop. Next.js automatically renders this children prop, which will be a child layout or a page.js component. You can nest layouts; a layout in app/dashboard/layout.js will be wrapped by the root layout in app/layout.js.
When to use it
Use layouts for any UI that should be shared and persistent across a set of routes. This is ideal for root application shells with headers and footers, dashboard sidebars, and any section of the UI that shouldn't lose its state when the user navigates between child pages.
When not to use it
Avoid layouts when you need a component to re-render and reset its state on every navigation. For example, if you want to run a useEffect hook to log a page view or trigger an enter animation every time a user visits a route, use a template.js file instead. A template has the same signature as a layout but creates a new instance for its children on each navigation.
One canonical example
A common setup is a root layout in app/layout.js that defines the <html> and <body> tags, a main header, and a footer. Then, in a route group like app/(dashboard)/layout.js, you might define a two-column layout with a persistent sidebar for dashboard navigation. The page content for /dashboard/analytics would then render inside this two-column structure, which itself is inside the root layout's structure.
Interview question
For which scenario would a developer choose a template.js file instead of a layout.js file in Next.js?
- a.To define a persistent navigation bar that retains its state across different routes.
- b.To embed global HTML structure like <html> and <body> tags for the entire application.
- c.To create a shared UI shell, such as a sidebar, that wraps multiple child pages.
- d.To ensure a component re-renders and resets its internal state upon every page navigation.Correct
Why? this is the answer
The card states that a template.js file should be used when a component needs to re-render and reset its state on every navigation, for example, to trigger a useEffect hook or an enter animation. Layouts, in contrast, are designed to persist state and avoid re-rendering across navigations, making options A, C, and D incorrect as they describe typical layout use cases.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles