What is App Router in Next.js: Simple Explanation and Example

The App Router in Next.js is a new way to organize and handle navigation and rendering in your app using the app/ folder. It simplifies routing by using file-based conventions and supports server components, layouts, and nested routes for better structure and performance.

How It Works

The App Router works by using the app/ folder in your Next.js project to define routes as folders and files. Each folder represents a route segment, and special files like page.js define what shows on that route. This is like organizing a filing cabinet where each drawer is a route and each file inside is the page content.

It also supports nested layouts, so you can share parts of the page (like headers or sidebars) across multiple routes without repeating code. The router automatically handles loading and rendering these parts efficiently, improving user experience and performance.

Unlike the older pages/ router, the App Router supports React Server Components, letting you fetch data and render parts of the UI on the server before sending it to the browser. This makes your app faster and more scalable.

Example

This example shows a simple Next.js app using the App Router with two routes: home and about.

javascript

app/
  page.js
  about/
    page.js

// app/page.js
export default function HomePage() {
  return <h1>Welcome to the Home Page</h1>;
}

// app/about/page.js
export default function AboutPage() {
  return <h1>About Us</h1>;
}

Output

When visiting '/' you see: Welcome to the Home Page
When visiting '/about' you see: About Us

When to Use

Use the App Router when building new Next.js apps to take advantage of modern features like server components, nested layouts, and improved routing structure. It is ideal for apps that need better performance and easier code organization.

For example, if you want to share a navigation bar across many pages or load data on the server before showing the page, the App Router makes this simple and efficient. It is also great for large apps where nested routes and layouts help keep code clean.

Key Points

• The App Router uses the app/ folder for file-based routing.
• Supports nested layouts to share UI parts across pages.
• Enables React Server Components for faster loading.
• Improves code organization and app performance.
• Recommended for new Next.js projects over the older pages/ router.

Key Takeaways

The App Router uses the app/ folder to define routes and layouts with files and folders.

It supports server components and nested layouts for better performance and code reuse.

Use it in new Next.js projects for modern routing and improved user experience.

It replaces the older pages/ router with more powerful features and structure.