Next.js App Router: A Complete Guide to Modern Routing

Next.js has become one of the most popular frameworks for building React applications. With the introduction of the App Router, Next.js offers a new architecture that improves routing, data fetching, layouts, and overall application performance.

What Is the App Router?

The App Router is the modern routing system introduced in Next.js 13. It is based on the app directory and provides powerful features such as Server Components, Nested Layouts, Streaming, and improved data fetching.

Basic structure:

app/
├── page.js
├── about/
│   └── page.js
└── blog/
    └── page.js

Routes generated:

• / → Home page
• /about → About page
• /blog → Blog page

Key Benefits of App Router

1. Server Components by Default

Components are rendered on the server by default, reducing client-side JavaScript and improving performance.

2. Nested Layouts

App Router supports reusable layouts that can be nested across multiple routes.

Example:

export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard Menu</nav>
      {children}
    </div>
  );
}

This layout automatically wraps all dashboard-related pages.

3. Simplified Data Fetching

Data can be fetched directly inside Server Components.

async function Posts() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return <div>{posts.length}</div>;
}

No need for getServerSideProps or getStaticProps.

4. Streaming and Suspense

App Router leverages React Suspense and Streaming to deliver content faster and improve user experience.

Important Files in the App Router

page.js

Defines a route page.

layout.js

Defines shared layouts for routes.

loading.js

Displays loading states during data fetching.

error.js

Handles route-level errors.

not-found.js

Creates custom 404 pages.

App Router vs Pages Router

App Router	Pages Router
app directory	pages directory
Server Components	Client-first approach
Nested Layouts	Limited layout support
Modern Data Fetching	getServerSideProps
Streaming Support	Limited support

When Should You Use App Router?

For new projects, App Router is the recommended approach. It represents the future of Next.js development and provides better performance, scalability, and developer experience.

Conclusion

The Next.js App Router introduces a modern and powerful routing architecture for React applications. With features like Server Components, Nested Layouts, Streaming, and simplified data fetching, it enables developers to build fast, scalable, and maintainable web applications.