KWAS Academy
Learn. Build. Master.
QUICK START:HTMLCSSJavaScriptTypeScriptPythonSQLReactNext.jsNode.jsDSASystem DesignDevOpsCybersecurityAI / ML
Advanced 18 min readModule: Module 2: Routing, Layouts & Nested Route Segments

File-System Routing & Nested Layouts

Master folder-based routing, route groups (group), parallel routes (@slot), and persistent layouts.

What You Will Learn in This Lesson

  • Folder hierarchy mapping to URL path segments
  • Persistent layouts that do not re-render during page transitions
  • Route groups (marketing) that organize folders without changing URLs

Introduction & Core Concept

Next.js uses a file-system based router where folders define routes. Special file conventions (layout.tsx, page.tsx, loading.tsx, not-found.tsx) control segment behavior.
WHY DOES THIS MATTER IN THE REAL WORLD?

Nested layouts preserve UI state (like audio playback, video scroll, or form drafts) across route changes.

Nested Course Layout Component

typescript
typescript
1
2
3
4
5
6
7
8
9
10
11
12
// app/learn/[courseSlug]/layout.tsx
export default function CourseLayout({
  children,
  params,
}: { children: React.ReactNode; params: { courseSlug: string } }) {
  return (
    <div className="flex">
      <aside className="w-64">Sidebar: {params.courseSlug}</aside>
      <main className="flex-1">{children}</main>
    </div>
  );
}

Line-by-Line Technical Breakdown

1Catch-all routes [...slug] match arbitrary nested paths (/docs/a/b/c).

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[TYPESCRIPT]
TYPESCRIPT SOURCE EDITOR
Interactive Live Code

Industry Best Practices & Professional Standards

  • Use Route Groups (auth) to create distinct layouts for marketing vs dashboard.

Lesson Summary & Core Takeaways

  • File-system routing makes web application architectures intuitive and structured.