Root Layout

Root Layout

Root Layout ~10 mins - nextjs

Root Layout

One benefit of using layouts in Next.js is that on navigation, only the page components update while the layout won't re-render. This is called partial rendering

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

This is called a root layout and is required.
Any UI you add to the root layout will be shared across all pages in your application.
You can use the root layout to modify your and tags, and add metadata.