Next.js

Next.js: Instant Navigation Gets Real + Turbopack Performance Wins

The Next.js team shipped 20 major pull requests focusing heavily on instant navigation improvements and Turbopack performance optimizations. Andrew Clark led the charge with new testing tools and navigation fixes, while Luke Sandberg delivered impressive database compaction speedups of up to 53% for Turbopack builds.

Duration: PT4M9S

https://podlog.io/listen/next-js-36fde2ae/episode/next-js-instant-navigation-gets-real-turbopack-performance-wins-cae67c8b

Transcript

Hey there, fellow developers! Welcome back to another episode of the Next.js podcast. I'm your host, and wow - do we have an exciting day to dig into! February 25th brought us 20 merged pull requests and 30 additional commits, and I'm honestly buzzing about what the team accomplished.

You know that feeling when you're working on something cool and suddenly all the pieces start clicking into place? That's exactly what happened with instant navigation this week. Andrew Clark has been absolutely crushing it with a series of updates that are making instant navigation not just work better, but actually testable and reliable.

The biggest news? We now have a brand new `@next/playwright` package with an `instant()` testing helper. Think of it like throttling your network in DevTools, but specifically designed for testing prefetched and cached UI states. This is huge because it means we can finally write reliable tests for those lightning-fast navigation experiences we've all been building. The API is beautifully simple too - just one cookie that controls the whole flow, so other testing frameworks can easily adopt the same approach.

But Andrew didn't stop there. He also fixed a tricky bug where route parameters were leaking into instant navigation shells during development. You know how frustrating it can be when your carefully crafted loading states suddenly show real data they shouldn't? This fix ensures that when you're in instant mode, params properly suspend like they should, keeping your shells clean and your user experience smooth.

Now, let's talk performance because Luke Sandberg just delivered some jaw-dropping improvements to Turbopack's database compaction. We're talking 45% faster partial compaction and 53% faster full compaction! The secret sauce? Luke completely reimagined how memory gets managed during compaction, switching from random access patterns to sequential scans, boxing heap elements to reduce memory swaps, and merging filters to eliminate billions of unnecessary operations. It's the kind of deep systems work that makes everything else feel snappier.

Luke also tackled compression optimization in another PR, making it optional for blocks that simply can't be compressed effectively. Instead of wasting CPU cycles trying to compress high-entropy data like hash indexes, the system now intelligently skips compression when it won't help. It's a perfect example of working smarter, not harder.

The validation improvements keep coming too. Janka Uryga fixed instant validation to properly handle blocking head elements, ensuring that errors related to `generateViewport` get caught at the right stage. These might sound like small details, but they're the foundation that makes instant navigation rock-solid in production.

I also want to shout out the testing improvements this week. The team fixed several flaky tests, improved error messages for image matching assertions, and even optimized build worker allocation to prevent spinning up more workers than you actually have pages to build. These kinds of developer experience improvements might not make headlines, but they save us all time every single day.

Today's Focus: If you've been curious about instant navigation, now is the perfect time to dive in. The new testing tools make it much easier to experiment with confidence. Try adding the `@next/playwright` package to a project and see how the `instant()` helper works with your navigation patterns. Even if you're not ready to ship instant navigation to production, understanding how it works will give you insights into React's concurrent features and help you build better user experiences.

For the Turbopack users out there, these performance improvements should be landing in your builds soon. Keep an eye on your build times - you might notice things getting noticeably faster, especially if you're working on larger codebases.

That's a wrap on today's episode! The Next.js team is clearly hitting their stride with these instant navigation features, and I can't wait to see what developers build with these new tools. Until next time, keep shipping amazing experiences, and remember - every great app starts with a great developer experience. Catch you in the next one!