Nested Layouts — Complete Guide

Nested 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 11 of 100

Nested Layouts

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Foundations · ~12 min read · Module 2: Layouts & Styling

Introduction

This lesson is part of the beginner section. We explain Nested Layouts slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Nested layouts stack. Root layout wraps everything; course layout adds a sidebar only for /courses/*; lesson layout might add a progress bar only for lesson pages. LearnHub lesson view keeps course navigation visible while the lesson content area updates. Nested layouts avoid re-mounting the sidebar on every click.

Nested Layouts appears in almost every LearnHub page you will build. Once it clicks, data fetching and auth become much easier.

When will you use this?

You use layouts and styling in every page you build from your first screen to production.

Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: LearnHub LMS

The EdTech / LMS team building LearnHub LMS uses Nested Layouts to keep the course sidebar visible while lesson content changes. students and instructors never see the TypeScript files — they just get a fast, reliable course catalog, lesson player, and progress tracking.

Production-style code

// app/courses/[slug]/layout.tsx
export default function CourseShellLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{ slug: string }>;
}) {
  return (
    <div className="grid grid-cols-[240px_1fr] gap-4">
      <aside>
        <p>Lessons in this course</p>
      </aside>
      <section>{children}</section>
    </div>
  );
}

What happens in production: In LearnHub LMS, getting Nested Layouts right means students and instructors trust the course catalog, lesson player, and progress tracking every day.

Lesson example (start here)

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

// app/courses/[slug]/layout.tsx
export default function CourseShellLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{ slug: string }>;
}) {
  return (
    <div className="grid grid-cols-[240px_1fr] gap-4">
      <aside>
        <p>Lessons in this course</p>
      </aside>
      <section>{children}</section>
    </div>
  );
}

Line-by-line walkthrough

Code	What it means
`// app/courses/[slug]/layout.tsx`	Comment — notes for humans; the compiler ignores it.
`export default function CourseShellLayout({`	Default export — the main page or component this file provides to Next.js.
`children,`	Part of the Nested Layouts example — read it together with the lines before and after.
`params`	Part of the Nested Layouts example — read it together with the lines before and after.
`}: {`	Closes a block started by { above.
`children: React.ReactNode;`	Part of the Nested Layouts example — read it together with the lines before and after.
`params: Promise<{ slug: string }>;`	Part of the Nested Layouts example — read it together with the lines before and after.
`}) {`	Closes a block started by { above.
`return (`	Returns JSX — what the user sees in the browser.
`<div className="grid grid-cols-[240px_1fr] gap-4">`	Part of the Nested Layouts example — read it together with the lines before and after.
`<aside>`	Part of the Nested Layouts example — read it together with the lines before and after.
`<p>Lessons in this course</p>`	Part of the Nested Layouts example — read it together with the lines before and after.
`</aside>`	Part of the Nested Layouts example — read it together with the lines before and after.
`<section>{children}</section>`	Part of the Nested Layouts example — read it together with the lines before and after.

How it works (big picture)

This layout applies to /courses/[slug] and all deeper routes unless they define their own layout.
children is the page or nested layout below.

Do this on your computer

Add layout.tsx inside courses/[slug]/
Add lesson page at courses/[slug]/lessons/[id]/page.tsx
Navigate between lessons — sidebar stays
Compare with removing layout — notice full remount
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 nest automatically. Put persistent UI in the right layout level. children renders nested pages.

Common questions

Can layouts fetch data?

Yes — async layouts can load course title for the sidebar.

How long should I spend on Nested 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 Nested 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 Nested 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.