Pages and Shared Layouts

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Create routes with page.tsx
Understand what the root layout is responsible for
Use nested layouts

Writing the same header on every single page quickly becomes a pain to maintain. A layout keeps repeated UI in one place and slots the child page in through the children prop.

The key idea

The root layout is required for the whole app and must include the html and body tags. Each route's page.tsx is what actually makes the URL usable. Adding another layout.tsx inside a folder gives you a nested layout that wraps just that route segment and everything under it. Because a layout doesn't get rebuilt during navigation and just stays put, it's a great fit for UI like a sidebar or a media player.

Let's try it together

tsx

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="my">
      <body>
        <header>Myanmar Notes</header>
        {children}
      </body>
    </html>
  );
}

// app/notes/page.tsx
export default function NotesPage() {
  return <h1>မှတ်စုအားလုံး</h1>;
}

How the code works

RootLayout shares the site title header across everything, and the current page gets inserted at children. Adding a NotesLayout lets both the list and detail pages under /notes share the Notes heading.

You should see

Opening /notes shows the "All Notes" page beneath the shared header.

5-Minute Try-It

Create a new app/about/page.tsx and add a paragraph about your app.

Next.js — Layouts and Pages — Next.js

Easy traps

Forgetting to include the html and body tags in the root layout
Cramming all your route-specific data into the layout

Exercise

Create a new app/about/page.tsx and add a paragraph about your app.

You'll know it worked when: Opening /notes shows the "All Notes" page beneath the shared header.