After shipping a dozen Next.js projects, a set of patterns keeps showing up as the difference between a fast site and a slow one.
Font loading is the most overlooked. Using next/font with display: swap and subsetting to only the latin character set can save 40–80KB per font family. Pair this with preconnect hints and you shave 200–400ms off LCP on first load.
Images deserve more than just using next/image. Setting sizes accurately (not just "100vw" for everything) lets the browser pick the right srcset entry. Combined with priority on above-the-fold images and lazy loading everything else, this alone improves CLS and LCP dramatically.
React Server Components changed how I think about data fetching. The key insight is that RSCs let you push data-fetching up the tree without waterfalls — each component fetches its own data in parallel at the server level. Use Suspense boundaries around slow data sources so the fast parts of your page stream to the client immediately.
For dynamic pages with mostly static content, Partial Prerendering (PPR) is the cleanest answer. The static shell serves instantly from the CDN edge; dynamic islands stream in. This pattern works especially well for e-commerce and dashboard apps.
Finally: measure everything with real user monitoring. Synthetic tests in CI catch regressions, but real RUM data tells you where users actually hurt.