Next.js performance in production — 8 optimisations that work immediately

Next.js is an excellent framework but it does not optimise your site automatically. Poor Image component configuration, unnecessary 'use client' on entire sections, and missing cache headers can result in an LCP of 4+ seconds even on good hosting.

Image optimisation: use `next/image` for all above-the-fold images, set the `priority` prop on the hero image, and use the `sizes` prop that matches the actual display size (not the default 100vw). Format: Next.js automatically serves AVIF and WebP if you have enabled `formats: ['image/avif', 'image/webp']` in `next.config`. Font optimisation: `next/font/google` or `next/font/local` with `display: 'swap'` eliminates layout shift caused by fonts.

Server Components are the default in Next.js App Router — use 'use client' only for components that require interactivity (useState, useEffect, event handlers). Mistake number one: marking an entire page or layout as a client component because of a single button. Solution: isolate interactive parts into smaller client components.

Bundle size: analyse with `@next/bundle-analyzer`. Framer Motion, Chart.js, date-fns and similar packages can add 200KB+. Use `dynamic()` import with `{ ssr: false }` for heavy components not immediately visible (modal, chart, map). Result: smaller initial bundle, faster FCP.

Cache headers: Next.js does not set aggressive cache headers automatically. For static assets (images, fonts) add `Cache-Control: public, max-age=31536000, immutable`. For API routes — set `revalidate` in Server Components or use ISR for pages that rarely change. Feather Studio builds Next.js sites with production-grade performance as a standard — see our references or get in touch.