Layouts
Root layout required
App/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<main>{children}</main>
</body>
</html>
)
}
Nested layout
Put layout.tsx
in folder and it will apply to everything in the folder
app/dashboard/layout.tsx
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
<section>
<nav></nav>
{children}
</section>
)
}
Templates
Dont persist across routes and maintain state, templates create a new instance for each of their children on navigation, useful when:
To resynchronize
useEffect
on navigation.To reset the state of a child Client Components on navigation.
app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
Layouts still apply
Last updated