← All notes

2026-01-28 · 4 min

Next.js portfolios that load like products

Next.jsPerformance

Portfolios often get treated as throwaway marketing. That is a missed chance. The site is the first software a client actually uses.

Use the App Router for pages that are mostly static. Keep client components at the edges: nav, forms, 3D, carousels. Everything else can stay a server component.

Images are usually the slow part. Prefer next/image, real dimensions, and a dark placeholder instead of dumping PNGs into the hero. Three.js belongs below the fold or behind a lightweight first frame.

Motion should explain hierarchy, not stall reading. If a visitor cannot reach Contact in two scrolls, the animation is winning and the product is losing.