What is Layout navigation behavior in NextJS?

NextJSframework~5 mins

Layout navigation behavior in NextJS

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Introduction

Layout navigation behavior helps keep parts of your page, like headers or menus, visible while you move between pages. This makes your app feel faster and smoother.

You want a header or sidebar to stay the same when switching pages.

You want to keep user input or scroll position while navigating.

You want faster page changes without reloading the whole page.

You want to share layout code across multiple pages easily.

Syntax

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  )
}

The RootLayout wraps all pages and keeps layout elements persistent.

The {children} represents the current page content inside the layout.

Examples

This layout keeps a navigation menu visible on all pages.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>Menu</nav>
        {children}
      </body>
    </html>
  )
}

This layout adds header and footer around the page content.

NextJS

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Sample Program

This RootLayout component keeps the header with navigation links visible on every page. The page content changes inside the <main> area when you navigate.

NextJS

import Link from 'next/link'

function Header() {
  return (
    <header style={{ padding: '1rem', backgroundColor: '#eee' }}>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
    </header>
  )
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        <main style={{ padding: '1rem' }}>{children}</main>
      </body>
    </html>
  )
}

OutputSuccess

Important Notes

Layouts in Next.js 14+ use the app/ folder and special layout.js files.

Navigation inside layouts is fast because only the page content updates, not the whole layout.

Use semantic HTML elements like <header>, <nav>, and <main> for better accessibility.

Summary

Layouts keep parts of your page visible during navigation for a smooth experience.

Use RootLayout to wrap all pages and share common UI like headers or footers.

Next.js updates only the page content inside layouts, making navigation faster.