Next.js 15 App Router: Complete Guide

Introduction

Next.js 15 introduces powerful features with the App Router. Learn how to leverage them effectively.

1. Server vs Client Components

Server Components (Default)

// app/users/page.tsx
async function UsersPage() {
  const users = await db.user.findMany()

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  )
}

Client Components

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

2. Data Fetching Patterns

Parallel Data Fetching

async function Page() {
  const [user, posts] = await Promise.all([
    getUser(),
    getPosts()
  ])

  return <ProfilePage user={user} posts={posts} />
}

Sequential Data Fetching

async function Page({ params }) {
  const user = await getUser(params.id)
  const posts = await getUserPosts(user.id)

  return <ProfilePage user={user} posts={posts} />
}

3. Streaming and Suspense

import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />
      <Suspense fallback={<LoadingSkeleton />}>
        <SlowComponent />
      </Suspense>
      <Footer />
    </div>
  )
}

4. Route Handlers (API Routes)

// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const user = await db.user.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}

5. Server Actions

'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name')
  const email = formData.get('email')

  await db.user.create({
    data: { name, email }
  })

  revalidatePath('/users')
}

Conclusion

Next.js 15 App Router provides powerful tools for building modern web applications.