Next.js & the App Router
Next.js is the most popular React framework — it wraps React with file-based routing, server rendering, data fetching, and production optimizations. The App Router (the app/ directory) is its modern routing system, built on React Server Components, with nested layouts and colocated loading and error UI. In this lesson you'll learn how folders become routes, what the special files ( page , layout , loading , error ) do, and where server and client components fit.
Learn Next.js & the App Router in our free React course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick recall.
Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
1️⃣ File-Based Routing
There's no router config. Your app/ folder tree is the route tree. A folder with a page.tsx becomes a navigable URL; nesting folders nests URLs.
The demo models exactly this mapping — feed it a file path, get the URL it serves:
2️⃣ A Page and a Dynamic Route
A page is a default-exported component. For a dynamic segment like [slug] , Next.js passes the matched value in params . Because pages are server components, you can await data right inside them — no useEffect .
3️⃣ Special Files
The App Router gives each route segment a set of reserved filenames. Drop one in a folder and Next.js wires it up automatically — loading and error UI come for free.
Match each special file to its job in the demo:
4️⃣ Nested Layouts
A layout.tsx wraps everything below it and — crucially — stays mounted as you navigate between sibling pages. The root layout renders and ; nested layouts add section-specific chrome like a dashboard sidebar.
The demo models how a page is wrapped by its whole layout chain, root first:
5️⃣ Server vs Client Components
In the App Router, components are server components by default : they render on the server and ship zero JavaScript. When you need interactivity — state, effects, event handlers, browser APIs — add the "use client" directive at the top of the file.
These lines of a dynamic blog page are scrambled. Put them in the correct order:
1) What URL does app/products/[id]/page.tsx serve?
/products/:id — a dynamic route. The matched id arrives in params .
2) Are App Router components server or client by default?
Server by default. They render on the server and ship no JS. Add "use client" at the top of the file to opt into interactivity (state, effects, handlers).
3) What's the benefit of a nested layout.tsx over re-rendering chrome on every page?
The layout stays mounted across sibling navigations, so shared UI (a sidebar, its scroll position, its state) persists and only the inner page swaps.
📋 Quick Reference
Given a few file paths under app/ , log the URL each one serves. Reuse the routing logic — this is how every Next.js URL is decided.
Practice quiz
What is Next.js?
- A CSS library
- A replacement for JavaScript
- A React framework adding routing, server rendering, data fetching, and optimizations
- A database
Answer: A React framework adding routing, server rendering, data fetching, and optimizations. Next.js is a full framework built around React, with file-based routing, SSR/SSG, and production optimizations.
What is the App Router?
- Next.js's modern routing system in the app/ directory, built on React Server Components
- A third-party routing library
- The old pages/ system
- A CSS router
Answer: Next.js's modern routing system in the app/ directory, built on React Server Components. The App Router uses the app/ directory, server components by default, nested layouts, and colocated UI files.
How does file-based routing decide URLs in the App Router?
- From a routes.js config file
- From a database
- From the component names
- The folder structure under app/ is the route tree; a folder with page.tsx becomes a URL
Answer: The folder structure under app/ is the route tree; a folder with page.tsx becomes a URL. Folders under app/ map to URL segments; you create folders and page files instead of registering routes.
What does a folder named [slug] under app/ create?
- A static route
- A dynamic route segment whose value arrives in params
- A layout
- An error page
Answer: A dynamic route segment whose value arrives in params. [slug] is a dynamic segment; the matched value is passed to the page in params.
Which special file renders the unique UI for a route?
- page.tsx
- layout.tsx
- loading.tsx
- error.tsx
Answer: page.tsx. page.tsx renders the unique UI for that route segment and makes the folder navigable.
What does layout.tsx do?
- Renders a 404 page
- Fetches data only
- Provides a shared shell that wraps the page and its children and stays mounted across navigation
- Defines CSS variables
Answer: Provides a shared shell that wraps the page and its children and stays mounted across navigation. A layout wraps everything below it and persists across sibling navigations; only the inner page swaps.
In the App Router, components are by default...
- Client components
- Server components that run on the server and ship zero JS
- Class components
- Static HTML
Answer: Server components that run on the server and ship zero JS. Files under app/ are Server Components by default, rendering on the server and shipping no JS for that component.
How do you make a component interactive (state, effects, event handlers)?
- Add 'use server' at the top
- Use a class component
- Wrap it in Suspense
- Add the 'use client' directive at the top of the file
Answer: Add the 'use client' directive at the top of the file. The 'use client' directive at the top of a file opts that component into being a client component with interactivity.
Which special file provides an instant fallback while a segment's data loads?
- error.tsx
- loading.tsx
- not-found.tsx
- page.tsx
Answer: loading.tsx. loading.tsx supplies an instant Suspense fallback shown while the segment is loading.
What URL does app/products/[id]/page.tsx serve?
- /products only
The [id] folder makes a dynamic route /products/:id; the matched id arrives in params.