Performance

Good defaults are wired in. This page lists what you already get and the few levers worth pulling as you grow.

What ships by default

next/image with AVIF and WebP, responsive device sizes and a cache TTL, configured in next.config.js.
Automatic code splitting and route-level prefetching from the App Router.
Server components by default, so most pages ship little client JavaScript.

Use the Image component

Serving images through next/image rather than a bare img tag is the single biggest win. It handles format negotiation, sizing and lazy loading for you.

Measure before tuning

Run Lighthouse against a production build to see real numbers, then optimize what is actually slow.

npm run build && npm run start
# in another terminal
npx lighthouse http://localhost:3000 --view

Caching and the database

Cache expensive reads at the data layer and lean on Next.js caching for static and revalidated content. As traffic grows, the usual order is: add database indexes for hot queries, cache read-heavy endpoints, then reach for a CDN or edge caching. Measure each step.

Next steps

MonitoringSee what is slow in production.DeploymentWhere and how to ship.