Layouts and Templates in Next.js

In the Next.js App Router layouts and templates define the shared structure of pages. A layout wraps child pages and preserves its state during navigation. A template does the same but is recreated on every transition.

Layouts

A layout is a component shared between multiple pages. When navigating between child pages the layout does not remount and preserves state:

// app/layout.tsx (root layout)
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

The root layout is required and must contain <html> and <body> tags.

Nested Layouts

Layouts can be nested. Each segment can have its own layout:

// app/docs/layout.tsx
export default function DocsLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <DocsSidebar />
      <div className="flex-1">{children}</div>
    </div>
  )
}

When a user navigates between documentation pages on Hack Frontend, the sidebar does not remount. This provides a smooth UX.

State Preservation

The key property of a layout: when navigating between child pages React does not remount the layout. This means:

useState state is preserved
useEffect effects do not rerun
DOM is not recreated

'use client'

// app/problems/layout.tsx
import { useState } from 'react'

export default function ProblemsLayout({
  children
}: {
  children: React.ReactNode
}) {
  const [filter, setFilter] = useState('all')

  return (
    <div>
      <FilterBar value={filter} onChange={setFilter} />
      {children}
    </div>
  )
}

The filter will persist when navigating between /problems/1 and /problems/2.

Templates

A template works like a layout but is recreated on every navigation:

// app/docs/template.tsx
export default function DocsTemplate({
  children
}: {
  children: React.ReactNode
}) {
  return <div>{children}</div>
}

When to Use Template Instead of Layout

Enter/exit animations on navigation
Logging page views (useEffect fires on every transition)
Resetting form state when navigating between pages

Layout vs Template

	Layout	Template
Remounting	No	Yes, on every navigation
State (useState)	Preserved	Reset
useEffect	Does not rerun	Runs again
DOM	Not recreated	Recreated

Special Files in a Segment

Layout wraps other special files in a specific order:

layout.tsx
  template.tsx
    error.tsx (React Error Boundary)
      loading.tsx (React Suspense)
        not-found.tsx
          page.tsx

Practical tip:

In most cases use layout. Template is only needed when you need to reset state or fire effects on navigation.

Useful Resources

nextjs.org/docs — Layouts and Templates
layout.tsx API Reference

Back

Forward

Content

Layouts Nested Layouts State Preservation Templates When to Use Template Instead of Layout Layout vs Template Special Files in a Segment Useful Resources Related Topics