Layouts

Layouts are components that are shared between different pages. They wrap a page. Useful for common UI elements like navigation components. Layouts are only rendered once, they don’t rerender on route changes. To create a layout, its similar to pages, except creating a page.js you create a layout.js

/app
	page.tsx
	layout.tsx
  /about
    page.tsx

const RootLayout = ({ children }) => {
  return (
    <div>
      <Nav />
      <div>{children}</div>
    </div>
  )
}

export default RootLayout

There has to be a root layout in your app, although you can have many root layouts when using more advanced routing features like grouping. Any route segment can create it’s own layout, making layouts nestable. Like pages, layouts can fetch data.

Templates

Templates are the exact same as Layouts, except the do render every time a route changes. This is useful for things like enter and exit animations and useEffect logic that happens on render