Most of the websites I build for clients have the same needs: they must load fast, rank well, be easy to update, and occasionally talk to a database. The Next.js App Router covers all of that without stitching together half a dozen tools.

Less JavaScript by default

Components are server components unless you opt out. A page of text, images and links ships almost no JavaScript, and only the interactive pieces (a form, a menu, a carousel) become client components with "use client". Visitors on slower phones notice the difference.

SEO without plugins

Each page exports its own metadata:

export const metadata = {
  title: 'Projects',
  description: 'Selected web and mobile work.',
  alternates: { canonical: '/projects' },
}

Add sitemap.js, robots.js and an opengraph-image file and the essentials are covered, generated from the same source of truth as the pages.

The right rendering for each page

Not every page needs the same strategy:

  • Static for pages that rarely change, like About and Services.
  • Revalidated for content that updates occasionally, like a blog list that refreshes when a post is saved.
  • Dynamic for anything personal, like a dashboard or a page that knows who is signed in.

You choose per route, not per project.

Server actions for forms

Contact forms, quote requests and admin edits can call a server function directly. Validation, database writes and authorisation checks all run on the server, and there's no separate API layer to maintain for simple sites.

The trade-off

The App Router has a learning curve, and the line between server and client code takes some getting used to. For content-led business sites, though, the result is faster pages and less code, and that's what clients are paying for.