Next.js 15 App Router Complete Guide

The App Router is the future of Next.js development. Here's everything you need to know.

What's New in App Router?

• Server Components by default
• Nested layouts
• Loading and error states
• Streaming and Suspense
• Parallel routes
• Intercepting routes

File-Based Routing

app/
├── layout.tsx          # Root layout
├── page.tsx           # Home page
├── about/
│   └── page.tsx       # /about
├── blog/
│   ├── page.tsx       # /blog
│   └── [slug]/
│       └── page.tsx   # /blog/[slug]

Server Components

// This runs on the server by default
async function ProductPage({ params }) {
  const product = await db.product.findUnique({
    where: { id: params.id }
  })
  
  return <ProductDetails product={product} />
}

Benefits:

• Smaller bundle sizes
• Direct database access
• No client-side fetching
• Better SEO

Layouts

Shared UI across routes:

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Loading States

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />
}

Error Handling

// app/dashboard/error.tsx
'use client'

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

Data Fetching

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // static
    // cache: 'no-store', // dynamic
    // next: { revalidate: 60 } // ISR
  })
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

Server Actions

async function submitForm(formData: FormData) {
  'use server'
  
  const title = formData.get('title')
  await db.post.create({ data: { title } })
  revalidatePath('/posts')
}

export default function Form() {
  return (
    <form action={submitForm}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  )
}

Migration from Pages Router

1. Start with new routes in app/
2. Move pages incrementally
3. Convert to Server Components
4. Update data fetching

Best Practices

1. Use Server Components by default
2. Add 'use client' only when needed
3. Colocate components with routes
4. Use loading.tsx for loading states
5. Handle errors gracefully

Our Next.js Services

At Viprasol, we build:

• Custom web applications
• SaaS platforms
• E-commerce solutions
• API integrations

Need a Next.js application? Contact us for development services.