Next.js Course
Next.js
/
Intermediate

App Router Overview

Definition

The new routing paradigm introduced in Next.js 13, built entirely on top of React Server Components, offering nested layouts, streaming, and advanced routing patterns.

Explain Like I'm New

Next.js used to have a `pages` directory. The `app` router completely replaced it. The biggest change? By default, every component you write in the `app` router runs on the SERVER, not the browser. This makes apps significantly faster and more secure.

Real World Example

Building a dashboard where the Sidebar (layout) never re-renders, but the main content area (page) updates instantly as you navigate, all while streaming data from the server.

Common Use Cases

  • •Modern Next.js development
  • •High-performance web apps

Architecture & Flow

Terminal Output

bash / terminal
/* Colocation Example in the App Router: app/ └── dashboard/ ├── page.tsx (✅ Public Route: /dashboard) ├── Button.tsx (🔒 Not a route. Just a component!) ├── styles.css (🔒 Not a route. Just CSS!) └── queries.ts (🔒 Not a route. Safe database logic!) */

Interview Questions

basic

  • Are components in the App Router client-side or server-side by default?

intermediate

  • What is the concept of 'Colocation' in the App Router?

Flash Cards

Question

Client or Server?

Click to reveal answer
Answer

Server-side! They are React Server Components by default.

Question

What is Colocation?

Click to reveal answer
Answer

In the old Pages router, any file placed in the `pages` directory automatically became a public route. In the App Router, only files specifically named `page.tsx` become routes. This means you can safely put your database files, CSS, and helper components inside the `app` directory right next to the pages that use them without accidentally making them public URLs.