Next.js: Layouts и вложенный routing — пример кода

// app/dashboard/layout.tsx — persists across /dashboard/* navigation
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />                {/* stays mounted, keeps scroll & open/closed state */}
      <main>{children}</main>
    </div>
  );
}

// app/(marketing)/layout.tsx — route group: applies to /about, /pricing…
// but "(marketing)" NEVER appears in the URL.
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>;
}

// app/onboarding/template.tsx — RE-MOUNTS on every step change (fresh animation)
export default function Template({ children }: { children: React.ReactNode }) {
  return <div className="animate-fade-in">{children}</div>;
}