What is a layout in the Next.js App Router, and how does it work?

A layout is a component defined in a layout.js file that wraps a page and any of its nested pages, letting you share common user interface elements like a navigation bar or sidebar across multiple pages without repeating that code in every single page file.

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}