Is Next.js App Router better than Pages Router?

App Router is better for new projects: Server Components, layouts, and nested routing are genuine upgrades. For existing Pages Router apps, the migration cost is real and only worth it if you need Server Components or streaming. Pages Router still works and is not deprecated.

When should I use use client in Next.js?

Use use client only for components that need interactivity — useState, useEffect, event handlers, browser APIs. Keep everything else as Server Components. A common mistake is adding use client at the top of a layout, which forces every child to be a Client Component.

What are parallel routes in Next.js App Router?

Parallel routes let you render multiple pages into one layout simultaneously, using named slots. The main use case is dashboards (multiple panels updating independently) and modal intercepts. They add complexity and are overkill for most marketing or content pages.

Should I use Server Actions or API routes in Next.js?

Use Server Actions for mutations triggered from your own forms — they preserve types and revalidate caches automatically. Use API routes (route handlers) for webhooks, external API integrations, and anything that needs a stable URL independent of your UI.

Next.js App Router Patterns That Actually Scale (After 3 Production Apps)

App Router shipped in Next.js 13. Three years and three production apps later, most teams still use it like Pages Router with extra folders. They add "use client" to everything, write API routes for every form, and wonder why their bundle is 800KB.

The win of App Router isn't the folders. It's Server Components, layouts that don't re-render, and Server Actions that replace half your API routes. Here's what actually scales, after shipping this on real client projects.

Default to Server Components — opt out, don't opt in

The biggest mental shift: every component is a Server Component by default. You don't add anything. You opt out with "use client" only when you need interactivity.

// app/products/page.tsx
// No directive. This is a Server Component.
 
import { db } from '@/lib/db'
import { ProductGrid } from './ProductGrid'
import { Filters } from './Filters'
 
export default async function ProductsPage() {
  const products = await db.product.findMany()
  return (
    <>
      <Filters />           {/* Client Component — interactive */}
      <ProductGrid products={products} />  {/* Server Component */}
    </>
  )
}