Next.js

App Router Deep Dive

Next.js 97 views Dec 22, 2025 3 min read

The App Router is the modern routing system in Next.js (v13+), designed to replace the older Pages Router. It provides file-based routing, nested layouts, server components, and advanced data fetching. Understanding it deeply helps build scalable, maintainable, and SEO-friendly applications.

1. App Router Basics

  • Located in the app/ directory.

  • Each folder represents a route, and each page.js file represents the UI for that route.

  • Supports nested routes, dynamic routes, and layouts.

  • Fully compatible with React Server Components and client components.

Example Structure

app/
├── layout.js       // Root layout
├── page.js         // Home page
├── about/
│   └── page.js     // /about
├── blog/
│   ├── page.js     // /blog
│   └── [slug]/
│       └── page.js // /blog/my-post

2. Layouts

Root Layout

  • Must include <html> and <body> tags.

  • Wraps all pages in the app.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Header</header>
        {children}
        <footer>Footer</footer>
      </body>
    </html>
  );
}

Nested Layout

  • Applies only to pages inside a folder.

app/
└── dashboard/
    ├── layout.js
    └── page.js

export default function DashboardLayout({ children }) {
  return <div className="dashboard">{children}</div>;
}

3. Pages and Routing

  • Static routes: app/about/page.js → /about

  • Dynamic routes: [slug]/page.js → /blog/my-post

  • Catch-all routes: [...slug]/page.js → /docs/react/hooks

  • Optional catch-all: [[...slug]]/page.js → /docs or /docs/react

4. Data Fetching in App Router

Supports server-side fetching in pages and layouts:

  • Server Components: Default; fetch data on server.

  • Static Rendering: Default for fetch with no cache options.

  • Dynamic Rendering: cache: 'no-store'

  • Incremental Static Regeneration (ISR): next: { revalidate: 60 }

Example:

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } });
  const posts = await res.json();
  return <div>{posts.length} posts</div>;
}

5. Server vs Client Components

  • Server Components (default in App Router):

    • Rendered on the server

    • Can fetch data directly

    • Do not include JS in client bundle

  • Client Components:

    • Marked with 'use client'

    • Needed for interactivity, hooks, and browser APIs

'use client';
import { useState } from 'react';

6. Error Handling

  • Use error.js in any folder to catch route-specific errors.

  • not-found.js for 404 pages.

export default function ErrorPage({ error, reset }) {
  return <div>Error: {error.message}</div>;
}

7. Loading and Suspense

  • Use loading.js for skeleton UI while page or layout loads.

  • Supports React Suspense for streaming UI.

export default function Loading() {
  return <p>Loading...</p>;
}

8. API Routes in App Router

  • Located under app/api/.../route.js

  • Support HTTP methods like GET, POST, PUT, DELETE

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello API' }));
}

9. Advantages Over Pages Router

FeaturePages RouterApp Router
LayoutsLimitedNested layouts
Data fetchinggetServerSideProps / getStaticPropsDirect fetch() in server components
Server components❌✅ (default)
Streaming UI❌✅ with Suspense
File-based APIpages/apiapp/api/route.js

10. Best Practices

  • Use nested layouts for shared UI

  • Prefer server components for data fetching

  • Use client components only when needed

  • Organize routes cleanly with folders

  • Use error.js and loading.js for better UX

  • Leverage dynamic and catch-all routes for flexible URLs

Conclusion

The App Router is a powerful upgrade in Next.js that combines routing, layouts, data fetching, and server-side rendering seamlessly. Mastering it allows you to build modern, scalable, and SEO-friendly web applications efficiently.

Some advanced sections are available for Registered Members
Register Now
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
Back to Tutorials