Next.js: Offline-First Web Apps Are Here

Transcript

Hey there, amazing developers! Welcome back to another episode of the Next.js podcast. I'm your host, and wow, do we have some exciting stuff to dive into today. Grab your favorite coffee because we're talking about something that's going to change how you think about building web apps - offline functionality that actually works.

So here's the big story from March 28th - Andrew Clark has been working on something absolutely game-changing. We're getting experimental offline support in Next.js, and I'm genuinely excited about this because it solves a problem we've all dealt with. You know that frustrating moment when your user's connection drops and your app just... breaks? Well, those days might be numbered.

Andrew shipped not one, but two major commits that work together beautifully. First, he added automatic offline retry behavior. Here's how cool this is - when a navigation, server action, or prefetch fails because of network issues, instead of just giving up or falling back to a full page reload, Next.js now blocks the request and automatically retries when connectivity comes back. It's like having a patient friend who just waits for you to get back online.

The detection is really clever too. It treats any fetch rejection as a potential network error - because server errors still return status codes, they don't just fail completely. Once it detects you're offline, it starts this smart polling loop with exponential backoff, basically tapping the network gently to see when you're back. And get this - it even listens to those browser online and offline events, so if your WiFi reconnects, it knows immediately.

Then, in the second commit, Andrew added the useOffline hook. This is the user-facing piece that developers have been asking for. You can now import useOffline from next/navigation and get a boolean that tells you exactly when your app is offline. The really neat part is how they implemented it - using useState and useOptimistic together, so the offline state can update even during blocked transitions. That means your UI stays responsive and informative even when everything else is waiting for the network.

Now, I have to mention - this is all behind an experimental flag called experimental.useOffline. So you'll need to opt in to try it out. But honestly, the fact that we're getting this level of offline-first thinking built right into Next.js is huge. This isn't just a nice-to-have feature; it's about making web apps that feel native and resilient.

Beyond the offline magic, the team kept up their regular React upgrades - we got two updates this week alone, keeping Next.js in sync with the latest React improvements. Sebastian Silbermann improved the developer experience by making AggregateError.errors show up properly in the error overlay. If you've ever wrestled with complex error objects during development, you'll appreciate this one.

We also saw some nice tooling improvements. The Create Next App templates got upgraded to Biome 2.4, which now includes Tailwind support. If you're using Biome for linting and formatting, this is going to make your Tailwind workflow much smoother.

Today's focus should definitely be experimenting with that new offline functionality. If you're building any kind of app where network reliability matters - and honestly, when doesn't it - spin up a new Next.js project and try out the experimental.useOffline flag. Play around with the useOffline hook, see how it feels in your components, and imagine all the ways you could use this to build more resilient user experiences.

The patterns Andrew's established here are really forward-thinking. We're moving toward a web where connectivity hiccups don't break the user experience, they just pause it temporarily. That's the kind of progress that makes me genuinely excited about web development.

That's a wrap for today! Keep building amazing things, stay curious about these new offline capabilities, and remember - every line of code you write is making the web a little bit better. Catch you next time!