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 layoutand 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.