Skip to content

Next.js App Router Explained — Modern React Routing

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Next.js App Router Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

The Next.js App Router (app directory) is the modern routing system built on React Server Components, providing layouts, loading states, error boundaries, and parallel routes.

What You'll Learn

  • App directory structure
  • Layout components and nesting
  • Loading and error boundaries
  • Parallel and intercepting routes
  • Server vs client components

Why It Matters

The App Router is the recommended routing solution for new Next.js projects, offering better performance with React Server Components and more powerful layout patterns.

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <a href="/">Home</a>
          <a href="/blog">Blog</a>
          <a href="/dashboard">Dashboard</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

// app/blog/[slug]/page.jsx
export default async function BlogPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// app/blog/loading.jsx
export default function Loading() {
  return <div className="skeleton" />;
}

// app/blog/error.jsx
"use client";
export default function Error({ error, reset }) {
  return <div>
    <h2>Something went wrong!</h2>
    <button onClick={reset}>Try again</button>
  </div>;
}

Expected output: A root layout wraps all pages, blog posts are server-rendered async, loading states show during fetch, and errors show a retry button.

← Previous Next.js Pages Router Explained — File-Based Routing Next → Next.js Routing Deep Dive — Links Navigation and Route Groups

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Nextjs