Next.js App Router: tips for faster and simpler sites

The App Router in Next.js 14 makes it easier to build fast, static-friendly sites while keeping dynamic parts where needed.

Prefer Server Components

• By default, components in the App Router are Server Components. They don’t ship JavaScript for their tree and are great for data fetching and layout.
• Use 'use client' only when you need hooks, browser APIs or interactivity. Keep client boundaries small.

Static by default

• Pages that don’t use dynamic APIs (cookies, headers, searchParams in a dynamic way) can be statically generated at build time.
• Use generateStaticParams for dynamic routes (e.g. blog slugs) so all important URLs are pre-rendered. That helps SEO and speed.

Metadata and SEO

• Export metadata or generateMetadata from layout and page files. Set title, description and Open Graph fields so shares and search look correct.
• Use a single metadataBase in the root layout and build canonical URLs from it.

Images and fonts

• Use next/image for images and define remotePatterns (or domains) for external URLs. You get optimization and better LCP.
• Use next/font for Google fonts so they’re self-hosted and avoid layout shift.

Keeping most of the app on the server and reserving client components for real interactivity keeps bundles small and Core Web Vitals in good shape.