Root Layout
Easy · Layouts
A layout.tsx wraps the pages below it. It receives the current page as the children prop and renders it somewhere inside shared UI such as a header and footer. When you navigate between pages, the layout stays mounted (it keeps its state) and only children changes.
Complete RootLayout({ children }) so it renders, in this order:
- a <header> with My Shop
- a <main> containing children
- a <footer> with © 2026 My Shop
Simplified: a real root layout must render <html> and <body>; here a <div> is used, and App plays the part of Next.js by rendering the layout with HomePage inside.