How does app/layout.tsx work in Next.js?

Next.jsMiddle~1 min read

app/layout.tsx is the shell of the interface, which wraps all pages further down the tree and does not unmount on navigation. In the App Router, it is one of the key files.

What `layout.tsx` is

In Next.js, every layout.tsx:

applies to all child segments
persists between transitions
can be nested
is a Server Component by default

Basic example

txt

app/
 ├─ layout.tsx        # global layout
 ├─ page.tsx          # /
 └─ dashboard/
     ├─ layout.tsx    # layout for /dashboard/*
     └─ page.tsx      # /dashboard

How it works mentally

txt

URL → layout (root)
        ↓
      layout (segment)
        ↓
       page

On transition:

/dashboard → /dashboard/users

app/layout.tsx does not unmount
app/dashboard/layout.tsx does not unmount
only page.tsx changes

Therefore:

state in the layout persists
sidebars / headers do not re-render

Minimal `app/layout.tsx`

tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

The root layout must:

return <html> and <body>
be the only one in the project

Nested layouts

tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

It applies only to:

/dashboard
/dashboard/users
/dashboard/settings

What a layout does NOT do

does not create a URL does not have access to params (unless it is a segment layout) does not re-render on navigation should not contain heavy client logic without a reason

Server vs Client layout

Server (default, recommended)

tsx

// without "use client"

can do await fetch
less JS in the browser
better SEO

Client layout

tsx

"use client";

can use useState, useEffect
Zustand, context
increases the JS bundle

A common pattern:

the layout is server
client components (Header, Sidebar) are mounted inside it

Connection with `loading.tsx`

txt

dashboard/
 ├─ layout.tsx
 ├─ loading.tsx
 └─ page.tsx

loading.tsx is shown
the layout stays
only page changes

Ideal for skeletons.

Short Answer

Interview ready

Premium

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