Loading
A wrapper that provides shared UI (like a header and sidebar) around pages so you don't have to repeat it everywhere — like a picture frame that stays the same while the photo inside changes.
A layout.tsx file that wraps child routes with shared UI. Layouts receive a children prop and persist across navigations — they do not remount when the user navigates between sibling routes, preserving state and avoiding unnecessary re-renders.
Layouts in the App Router participate in the nested segment tree. Each layout receives children (the next segment's layout or page) and optional params. Because layouts do not remount on navigation, they are ideal for persistent UI shells but cannot access searchParams (which would force remounting). Root layout (app/layout.tsx) is required and must contain <html> and <body> tags. Parallel slots (@slot) are passed as additional named props to the layout.