Devlog: Proximity Prefetching
Next.js prefetches links when they enter the viewport. I learned that is often too late. By the time a link is visible, I am usually already moving toward it.

So I built a proximity prefetcher. When the cursor gets within 150px of an internal link, that route starts loading in the background.

The idea
Hover prefetch works on desktop. I wanted something earlier. If I am drifting toward Projects, the page should already be warming up before I click.

What I learned
Performance — A raw mousemove handler on the whole window runs constantly. I learned to throttle checks to every 80ms and keep a Set of prefetched routes so the same page never gets requested twice.

Distance math — Measuring cursor to link center was wrong for wide nav items. I learned to find the closest point on the bounding box first, then check if the cursor is inside the radius.

What to prefetch — I learned to only prefetch internal paths starting with /. External and hash links stay out. Keeps the logic focused on actual page transitions.

Mobile — I learned this pattern is mouse only. Touch devices keep Next.js default prefetch. No cursor means no proximity signal.

Takeaway
I learned that small perf details matter on animation heavy sites. Navigation already has a bubble transition. Prefetching nearby routes made that transition feel instant instead of exposing a gap I had not designed for.