App Router - Complete Next.js Tutorial

🗺️ What is App Router?

App Router is Next.js's modern routing system using the app directory. It supports React Server Components, nested layouts, and improved data fetching for building powerful web applications.


// app/page.js - Homepage
export default function Home() {
  return <h1>Welcome to App Router!</h1>
}

App Router Features

📁

File-Based Routing

Folders create routes automatically

app/page.js app/about/page.js

🎨

Layouts

Shared UI across routes

layout.js Nested layouts

⚡

Server Components

Default server rendering

Fast loading SEO friendly

🔄

Loading States

Built-in loading UI

loading.js Suspense

🔹 Basic Routing

Create routes by adding folders and page.js files in the app directory. Each folder represents a URL segment, and page.js makes it accessible.

🔸 Folder Structure

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

🔸 Creating Pages

// app/page.js
export default function Home() {
  return <h1>Home Page</h1>
}

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

// app/blog/page.js
export default function Blog() {
  return <h1>Blog Page</h1>
}

🔹 Layouts

Layouts wrap pages and persist across navigation. They're perfect for headers, footers, and shared UI components that appear on multiple pages.

🔸 Root Layout (Required)

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>© 2025 My App</footer>
      </body>
    </html>
  )
}

🔸 Nested Layout

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return (
    <div>
      <aside>
        <h3>Blog Sidebar</h3>
        <ul>
          <li>Recent Posts</li>
          <li>Categories</li>
        </ul>
      </aside>
      <article>{children}</article>
    </div>
  )
}

🔹 Navigation

Use the Link component for client-side navigation between pages. It provides fast transitions without full page reloads for better user experience.

🔸 Using Link Component

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}

🔸 Programmatic Navigation

'use client'
import { useRouter } from 'next/navigation'

export default function LoginButton() {
  const router = useRouter()
  
  const handleLogin = () => {
    // Perform login logic
    router.push('/dashboard')
  }
  
  return <button onClick={handleLogin}>Login</button>
}

🔹 Loading and Error States

App Router provides special files for handling loading and error states automatically. These improve user experience during data fetching and when errors occur.

🔸 Loading UI

// app/blog/loading.js
export default function Loading() {
  return (
    <div>
      <p>Loading blog posts...</p>
      <div className="spinner"></div>
    </div>
  )
}

🔸 Error Handling

// app/blog/error.js
'use client'

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

🔸 Not Found Page

// app/not-found.js
export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <a href="/">Go Home</a>
    </div>
  )
}

🔹 Server vs Client Components

By default, all components in the app directory are Server Components. Use 'use client' directive for interactive components that need browser APIs.

🔸 Server Component (Default)

// app/posts/page.js
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function Posts() {
  const posts = await getPosts()
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

🔸 Client Component

// components/Counter.js
'use client'
import { useState } from 'react'

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

🔹 Special Files

App Router uses special file names for specific purposes:

page.js - Makes a route publicly accessible
layout.js - Shared UI for a segment and its children
loading.js - Loading UI for a segment
error.js - Error UI for a segment
not-found.js - 404 UI for a segment
route.js - API endpoint
template.js - Re-rendered layout

App Router in Next.js