Pages and Layouts — Complete Guide

Pages and Layouts — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.

8 min read Updated 6/25/2026

On this page

Next.js Tutorial (LearnHub) · Lesson 5 of 100

Pages and Layouts

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Foundations · ~12 min read · Module 1: Next.js Foundations

Introduction

This lesson is part of the beginner section. We explain Pages and Layouts slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. A page is the unique UI for a URL. A layout is shared UI that persists when navigating between child pages — headers, sidebars, and fonts stay mounted. LearnHub needs the same top nav on every page but a course-specific sidebar only under /courses/[slug]. Layouts solve both without copy-paste.

Pages and Layouts is setup knowledge. Without it, LearnHub will not run. Spend time here until npm run dev works without errors.

When will you use this?

You need this before writing any Next.js code — same as installing Node.js before opening a project.

Every React/Next.js job expects you to run npx create-next-app and npm run dev on day one.
Interviewers often ask you to explain the App Router folder structure and Server vs Client Components.

Real-world: Practo-style clinic portal

The Healthcare team building Practo-style clinic portal uses Pages and Layouts to wrap every LearnHub screen with a shared header and sidebar. patients and doctors never see the TypeScript files — they just get a fast, reliable appointment booking and medical records UI.

Production-style code

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

// app/courses/layout.tsx
export default function CoursesLayout({
  children
}: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <aside>Categories</aside>
      <div>{children}</div>
    </div>
  );
}

What happens in production: In Practo-style clinic portal, getting Pages and Layouts right means patients and doctors trust the appointment booking and medical records UI every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

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

// app/courses/layout.tsx
export default function CoursesLayout({
  children
}: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <aside>Categories</aside>
      <div>{children}</div>
    </div>
  );
}

Line-by-line walkthrough

Code	What it means
`// app/layout.tsx`	Comment — notes for humans; the compiler ignores it.
`export default function RootLayout({`	Default export — the main page or component this file provides to Next.js.
`children`	Part of the Pages and Layouts example — read it together with the lines before and after.
`}: { children: React.ReactNode }) {`	Closes a block started by { above.
`return (`	Returns JSX — what the user sees in the browser.
`<html lang="en">`	Part of the Pages and Layouts example — read it together with the lines before and after.
`<body>`	Part of the Pages and Layouts example — read it together with the lines before and after.
`<header><nav>LearnHub</nav></header>`	Part of the Pages and Layouts example — read it together with the lines before and after.
`{children}`	Part of the Pages and Layouts example — read it together with the lines before and after.
`</body>`	Part of the Pages and Layouts example — read it together with the lines before and after.
`</html>`	Part of the Pages and Layouts example — read it together with the lines before and after.
`);`	Part of the Pages and Layouts example — read it together with the lines before and after.
`}`	Closes a block started by { above.
`// app/courses/layout.tsx`	Comment — notes for humans; the compiler ignores it.

How it works (big picture)

Root layout must include html and body tags.
Courses layout adds sidebar only for /courses/*.
Navigating between lessons under the same course layout keeps the sidebar mounted.

Do this on your computer

Add a simple header to root layout.tsx
Create courses/layout.tsx with a fake sidebar
Add two course child routes and click between them
Confirm sidebar does not flash away on navigation
Read the real-world section and name which part of LearnHub uses this topic.
Run the example locally with npm run dev and confirm the same behavior.
Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

Change a string or route in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error overlay, then fix it.

Remember

Layouts wrap pages and nest. Shared chrome goes in layout.tsx. Page content goes in page.tsx.

Common questions

Layouts persist; only page content swaps — great for sidebars.

How long should I spend on Pages and Layouts?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.

What if I get stuck on Pages and Layouts?

Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Pages and Layouts used in real jobs?

See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.