What is root layout?
The root layout is defined at the top level of the app directory and applies to all routes. This layout enables you to modify the initial HTML returned from the server.
- 1
The app directory must include a root layout.
- 2
The root layout must define <html> and <body> tags since Next.js does not automatically create them.
- 3
Only the root layout can contain <html> and <body> tags.
- 4
You can use the built-in SEO support to manage <head> HTML elements, for example, the <title> element.
- 5
You can use route groups to create multiple root layouts. See an example here.
- 6
The root layout is a Server Component by default and can not be set to a Client Component.
- 7
The root layout replaces the _app.js and _document.js files.
Scenario Questions
0-2 years experience
- 1If you need to add a navigation bar that appears on every page of your Next.js app, where would you place the component and how would you use the root layout to achieve that?
- 2What happens if you forget to export a default RootLayout component in the app directory? How does Next.js respond when you run the dev server?
- 3How would you include a global CSS file in a Next.js project using the root layout?
2-5 years experience
- 1You added a new third‑party script tag inside the root layout, but the script is loading twice on some pages. What could cause this duplication and how would you debug it?
- 2During a feature rollout you need the root layout to conditionally render a banner based on a feature flag stored in a cookie. How would you implement that without causing a full page reload?
- 3Your team notices that the metadata defined in the root layout (e.g., title) is being overridden by a child page's metadata unexpectedly. Explain why this happens and how to correctly compose metadata.
5-8 years experience
- 1A performance audit shows that the root layout is causing a large bundle size due to heavy components imported at the top level. How would you refactor the layout to improve load time while preserving shared UI?
- 2You need to support per‑tenant theming (different colors, logos) across the entire app, and the theme must be determined from the subdomain at request time. Design a strategy using the root layout and Next.js server components to inject the correct theme without client‑side flicker.
- 3Explain how you would handle error boundaries in the root layout to catch errors from any child page, and discuss trade‑offs of placing error handling at this level versus per‑page.
8+ years experience
- 1Your organization is migrating a large legacy pages directory to the new app router. What architectural considerations would you make regarding the root layout to ensure a smooth transition and maintainability across multiple teams?
- 2Discuss the long‑term implications of placing authentication logic (e.g., session validation) in the root layout versus using middleware. How does this affect scalability, security, and cross‑team responsibilities?
- 3If you were to design a shared component library that multiple Next.js applications will consume, how would you structure the root layout and its exported types to enable consistent theming and metadata across all consuming apps?
Follow-up Questions
- How would you test that the root layout renders correctly across different routes?
- Can you describe a scenario where moving code out of the root layout improved performance?
- What are the trade‑offs of using server components versus client components inside the root layout?