Describe layout.js.
A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender. You can define a layout by default exporting a React component from a layout file. The component should accept a children prop which can be a page or another layout.
- 1
The layout file is used to define a layout in your Next.js application.
- 2
The app directory must include a root app/layout.js
- 3
The root layout must define <html> and <body> tags- but not manually but using Metadata API.
- 4
You can nest layouts.
- 5
Layouts can be defined at specific route segment(folders).
- 6
layout receive children(required) and params(optional) props
- 7
Layouts do not receive searchParams
- 8
Layouts cannot access pathname.
Scenario Questions
- 1
Imagine you're building a dashboard with a sidebar. You want the sidebar to stay visible and keep its scroll position when users click different links. How would you set up your Next.js App Router files to make sure the sidebar doesn't re-render or lose its state on navigation?
- 2
We have a junior developer who created a new route group in our Next.js app but forgot to include a layout.js at the root, or accidentally deleted the html and body tags from it. What kind of errors or behavior would we see in the browser, and how would you fix it?
- 1
We have a multi-step checkout wizard. The designer wants a progress bar at the top that animates every time the user moves to the next step. We put the progress bar in a layout.js, but the animation only plays on the first load and doesn't trigger when navigating between steps. Why is this happening, and how would you refactor this?
- 2
Suppose you have a nested layout structure: a root layout, a dashboard layout, and a settings layout. If you fetch user profile data in the root layout, how does that affect the loading state and rendering performance of the nested settings page? How would you prevent a slow database query in the root layout from blocking the entire page load?
- 1
We are designing a large SaaS platform where different workspaces can have custom themes and navigation. We want to fetch workspace-specific configuration in a layout.js. How would you architect the data fetching and caching strategy here to ensure we aren't making redundant API calls as the user navigates deep within a workspace, while still keeping the initial page load fast?
- 2
In a high-traffic e-commerce site, we want to use a shared layout for product categories. However, we need to track page views in our analytics tool every time a user switches categories. Since layout.js doesn't re-render on navigation, how would you implement this analytics tracking reliably without moving the tracking logic into every single leaf page?
- 1
We are migrating a massive legacy Pages Router application to the App Router. The old app relies heavily on _app.js and _document.js for global state providers like Redux, ThemeProviders, and Auth. How would you design the migration path to layout.js files, especially considering the mix of Server and Client Components, without causing massive bundle size regressions or breaking global state?
- 2
Our engineering organization is moving towards a micro-frontend-like structure using Next.js Multi-Zones. We need to maintain a consistent global header and footer across different independently deployed Next.js apps. How would you design the layout architecture to share these global layouts across zones while balancing performance, independent deployability, and version drift?
Follow-up Questions
- ❓How does layout.js differ from template.js in terms of DOM state and mounting?
- ❓What happens to a layout's state when you navigate between sibling routes?
- ❓How would you pass data from a layout down to its child page components?