Why App directory (App Router) in NextJS? - Purpose & Use Cases

The Big Idea

Discover how Next.js App directory turns your file structure into a powerful routing system effortlessly!

The Scenario

Imagine building a website where you manually create routes by writing complex configuration files and linking pages one by one.

Every time you add a new page, you must update multiple files and remember exact paths.

The Problem

This manual routing is confusing and easy to break.

It slows down development and makes your code messy and hard to maintain.

The Solution

The App directory in Next.js automatically creates routes based on your folder and file structure.

You just add files and folders, and Next.js handles the routing for you.

Before vs After

✗ Before

const routes = { home: '/', about: '/about', contact: '/contact' };
// Manually map routes and import components

✓ After

app/
  page.js  // Automatically becomes '/' route
  about/page.js  // Automatically becomes '/about' route

What It Enables

This lets you focus on building pages and features without worrying about routing setup.

Real Life Example

When creating a blog, you just add a new folder for each post inside the app directory, and Next.js creates the URL automatically.

Key Takeaways

Manual routing is slow and error-prone.

App directory auto-generates routes from your files.

It simplifies development and keeps code clean.