App Router Basics — Complete Guide

App Router Basics — 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 4 of 100

App Router Basics

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 App Router Basics slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. App Router maps folders under app/ to URLs. page.tsx makes a route public. layout.tsx wraps child routes. route.ts defines HTTP handlers. Special files like loading.tsx and error.tsx add UX per segment. LearnHub URLs like /courses, /courses/nextjs-101, and /dashboard all come from folder structure — no central routes array to maintain.

App Router Basics 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: Flipkart-style catalog

The E-commerce team building Flipkart-style catalog uses App Router Basics to map URLs to app/ folders instead of the old pages/ router. shoppers never see the TypeScript files — they just get a fast, reliable search, filters, and fast product listing pages.

Production-style code

app/
  layout.tsx           → wraps entire site
  page.tsx             → /
  courses/
    page.tsx           → /courses
    [slug]/
      page.tsx         → /courses/:slug
  dashboard/
    layout.tsx         → dashboard shell only
    page.tsx           → /dashboard

What happens in production: In Flipkart-style catalog, a solid App Router Basics foundation lets the team ship search, filters, and fast product listing pages on schedule without toolchain surprises.

Lesson example (start here)

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

app/
  layout.tsx           → wraps entire site
  page.tsx             → /
  courses/
    page.tsx           → /courses
    [slug]/
      page.tsx         → /courses/:slug
  dashboard/
    layout.tsx         → dashboard shell only
    page.tsx           → /dashboard

Line-by-line walkthrough

Code	What it means
`app/`	Part of the App Router Basics example — read it together with the lines before and after.
`layout.tsx → wraps entire site`	Part of the App Router Basics example — read it together with the lines before and after.
`page.tsx → /`	Part of the App Router Basics example — read it together with the lines before and after.
`courses/`	Part of the App Router Basics example — read it together with the lines before and after.
`page.tsx → /courses`	Part of the App Router Basics example — read it together with the lines before and after.
`[slug]/`	Part of the App Router Basics example — read it together with the lines before and after.
`page.tsx → /courses/:slug`	Part of the App Router Basics example — read it together with the lines before and after.
`dashboard/`	Part of the App Router Basics example — read it together with the lines before and after.
`layout.tsx → dashboard shell only`	Part of the App Router Basics example — read it together with the lines before and after.
`page.tsx → /dashboard`	Part of the App Router Basics example — read it together with the lines before and after.

How it works (big picture)

Each folder can have one page.tsx.
layout.tsx nests — dashboard layout does not replace root layout, it wraps inside it.
Dynamic folders use [slug] syntax.

Do this on your computer

Create app/courses/page.tsx with a heading "Courses"
Visit /courses in the browser
Create app/dashboard/page.tsx
Notice both pages still use root layout.tsx
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

Folders = URL segments. page.tsx = UI for that segment. layout.tsx = shared wrapper for subtree.

Common questions

Can I have multiple pages in one folder?

No — one page.tsx per route segment. Use subfolders for more routes.

How long should I spend on App Router Basics?

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 App Router Basics?

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 App Router Basics 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.