A Complete Guide to Using the App Router in Next.js 13

Aug 5, 2025

📌 Introduction

Next.js 13 introduced a significant shift in how routing works in React applications. The new App Router brings a more flexible and powerful approach, replacing (but not immediately deprecating) the traditional pages directory. With features like nested layouts, server components, and simplified loading states, the App Router marks a step forward in building modern web apps.

In this guide, we’ll explore:

The differences between the Pages Router and the App Router
How to set up and structure your project
Key features: layouts, nested routes, loading states, and server/client components
Real examples to help you implement the new system

🔀 Pages Router vs App Router: What’s New?

Before we dive in, here’s a quick comparison:

FeaturePages Router (pages/)App Router (app/)File-Based Routing✅✅Nested Layouts❌✅Server Components❌✅Streaming / Partial Rendering❌✅Loading UI (Suspense)❌✅Middleware Routing✅✅

The App Router uses the new app/ directory and introduces several conventions to streamline app development.

📁 Project Structure with App Router

Your project structure with the app/ directory might look like this:

cssCopyEditapp/
├─ layout.tsx
├─ page.tsx
├─ about/
│  ├─ page.tsx
│  ├─ layout.tsx
├─ blog/
│  ├─ [slug]/
│     ├─ page.tsx
│     ├─ loading.tsx

🔹 Key Files:

page.tsx: Renders the route's main content.
layout.tsx: Wraps around pages to provide consistent UI (e.g., headers, sidebars).
loading.tsx: Optional fallback UI for slow-loading content.
error.tsx: Optional UI when something goes wrong.

⚙️ Creating Routes in App Router

Routing is file-based and much more powerful now. For example:

app/about/page.tsx → /about
app/blog/[slug]/page.tsx → /blog/my-post

To access dynamic route parameters like slug, use the new useParams() hook:

tsxCopyEditimport { useParams } from 'next/navigation';

export default function BlogPost() {
  const { slug } = useParams();

  return <div>Viewing post: {slug}</div>;
}

🧱 Layouts: The Backbone of App Router

Layouts allow you to share UI across multiple pages — like headers, sidebars, or footers — and persist them across navigations.

Example: app/layout.tsx

tsxCopyEditexport default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

You can also nest layouts. For example, app/blog/layout.tsx will wrap only blog-related pages.

🌀 Loading UI with Suspense

You can now create smooth transitions and loading experiences with loading.tsx. For example:

tsxCopyEdit// app/blog/[slug]/loading.tsx
export default function Loading() {
  return <p>Loading blog post...</p>;
}

This shows immediately when the page is being streamed or data is being fetched.

🔄 Client vs Server Components

By default, components in app/ are server components, which render on the server and reduce client-side JavaScript.

To use client-side features (e.g., hooks like useState or useEffect), add 'use client' at the top of the file:

tsxCopyEdit'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

🧪 Bonus: Handling Not Found Pages

You can add a not-found.tsx file inside any route to handle 404s:

tsxCopyEdit// app/blog/[slug]/not-found.tsx
export default function NotFound() {
  return <p>Oops! Blog post not found.</p>;
}

Then use the notFound() function inside your server component when needed:

tsxCopyEditimport { notFound } from 'next/navigation';

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return <div>{post.title}</div>;
}

✅ Final Thoughts

The App Router in Next.js 13 brings an exciting evolution to building modern web apps — with server-first architecture, composable layouts, and enhanced routing control.

Although it introduces new concepts, once you're familiar with the structure and mindset, it can dramatically improve your development workflow and performance.