What is a layout in Next.js?

Next.jsMiddle~2 min read

A layout in Next.js is a special component that sets the overall page structure and is reused across multiple pages.

In other words: a layout is the site's "shell" that stays in place while the content inside it changes.

Why a layout is needed

A layout solves several tasks at once:

Overall page structure (header, footer, sidebar)
Code reuse
Better performance
Managing metadata and SEO
Consistent styles for a group of pages

Instead of writing <Header /> and <Footer /> from scratch on every page, you move them into a layout - and they are automatically applied to all nested pages.

How a layout works in Next.js (App Router)

In the App Router, a layout is a layout.tsx (or layout.js) file that sits in a route's folder.

Example structure:

txt

app/
 ├─ layout.tsx        ← root layout
 ├─ page.tsx          ← the home page
 └─ blog/
     ├─ layout.tsx    ← layout only for /blog
     └─ page.tsx

A simple layout example

tsx

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

Here:

children is the current page's content
header and footer do not re-render when moving between pages

Nested layouts

Layouts can be nested.

For example:

a root layout - for the whole site
a layout in /dashboard - only for the admin panel
a layout in /blog - only for the blog

Each nested layout wraps the pages inside its own folder.

This is convenient when:

different sections have a different design
separate navigation is needed
different metadata or SEO settings are needed

How a layout differs from a page

page	layout
Responsible for a specific page	Responsible for the structure
Changes on navigation	Is preserved
Renders every time	Is reused
Shows content	Wraps content

An important point

A layout is a Server Component by default, so:

you can make database queries
you can read cookies and headers
you cannot use useState and useEffect without "use client"

In short

A layout in Next.js is:

a shared page template that stays in place during navigation and wraps the content of its child pages

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is a layout in Next.js?

#Why a layout is needed

#How a layout works in Next.js (App Router)

#A simple layout example

#Nested layouts

#How a layout differs from a page

#An important point

#In short