Root Layout

app/layout.tsx is the only place where <html> and <body> are written. It wraps every page. Put things here that appear on all pages: fonts, global CSS, navbar, footer, providers.

import type { Metadata } from 'next';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import './globals.css';

export const metadata: Metadata = {
  title: { default: 'ShopEase', template: '%s | ShopEase' },
  description: 'Shop mobiles, books and fashion at the best prices',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main className="container">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

• A layout gets children and (for dynamic folders) params as a Promise. It does not get searchParams.
• Layouts do not re-render when you navigate between their child pages. Do not rely on them for data that must change per page.
• Layouts are Server Components by default; you can still render Client Components inside them.