Your Next.js animation library is costing you 40-60kb before a single frame moves.
Let's say you use Framer Motion. It ships JavaScript the browser has to parse and execute on the main thread, all before your user sees anything animate.
💡 Here's what changed in Next.js 16
Next.js now wired up React's View Transitions API in the App Router
✔️ Runs on the browser's compositor, not the main thread
✔️ 60fps page transitions and shared element morphs
✔️ Zero animation dependencies
✔️ Already in the browser and now you can use it
🧠 How it works
Wrap ViewTransition around elements you'd like to animate. For Page transitions, on your <Link>, pass transitionTypes={['nav-forward']} to tag the navigation and on the destination page, wrap content in <ViewTransition> with enter and exit maps.
That's it.
Each transition type gets its own CSS animation - forward slides in, back slides out.
Here's how:
🚀 The Takeaway
Staying current with Next.js isn't just about shipping new features, it's about deleting the bloat you used to need
🎥 If you'd prefer a video project walkthrough instead, check this deep dive.
--
🎁 If you're interested, you can download this free cheatsheet covering 29 common mistakes just like this one in React and Next.js.