Building a Progressive Web App with Next.js 15
Introduction: From Meh App to Marvel—Enter PWA
Picture this: it’s 3 PM, my caffeine tolerance is maxed out, and I’m trying to explain to a client why their web app needs to work offline.
They ask:
“Can we just make it an app that works... like... always?”
I laugh nervously. They don’t.
Welcome to the world of Progressive Web Apps (PWAs)—where your regular ol' website levels up into a pseudo-native app that works offline, feels fast, and doesn’t require anyone to download anything from an app store.
I used Next.js 15 to make it happen.
Was it smooth? Not exactly.
Was it worth it? Absolutely.
What Even Is a PWA?
If a website and a native app had a baby—and that baby grew up on React and service workers—it’d be a Progressive Web App.
What PWAs can do:
- Work offline
- Send push notifications
- Load fast, even on slow networks
- Install like a native app
- Skip the app store drama
Still—don’t delete your native app just yet...
Pros and Cons of PWAs
Pros:
- No app store approval nightmares
- Offline-first = happy users
- Lower development + maintenance cost
- Works across platforms (one codebase, many devices)
Cons:
- iOS is still the grumpy uncle of PWAs
- Push notifications aren’t universally supported
- Limited native API access
- Debugging service workers = spicy headache
Flashback: A Short History of PWAs (and Next.js)
PWAs were Google’s answer to terrible mobile experiences circa 2015.
Next.js started as the SSR hero React didn’t know it needed—and now it’s a full-stack framework juggernaut.
What’s cool in Next.js 15?
- File-based routing with App Router
- Faster data fetching via serverActions
- Experimental features like partial prerendering
- Support for Service Workers
Case Study: The Startup Dashboard That Refused to Die Offline
One of my clients—let’s call them NoBar WiFi Inc.—had field agents constantly offline in remote areas.
We turned their dashboard into a PWA by:
- Caching critical routes for offline access
- Using service workers + background sync
- Making it installable (like a native app)
Real user feedback:
“It still worked while I was in the middle of nowhere with zero signal. Unreal.”
That’s when I knew—this was more than a “cool dev thing.”
This was real user experience.
The Bigger Picture: Why PWAs + Next.js 15 = Future-Proof
As Next.js 15 leans into performance and full-stack capabilities, PWAs are becoming mission-critical—especially where internet access isn’t guaranteed.
Real-world use cases:
- E-commerce: Speed + installability = sales
- SaaS Dashboards: Sync + offline = trust
- Event Apps: No app store required
PWAs aren’t just a “nice to have.” They’re a necessity in many markets.
Conclusion: Yes, You Should Build a PWA. No, It Won’t Be Easy.
I won’t sugarcoat it—building a PWA with Next.js 15 made me question every decision I’ve made as a dev. But in the end?
I built something that:
- Worked offline
- Loaded fast
- Made users say: > “Wait... this is a website?”
You don’t need to be a service worker whisperer to make it work.
You just need:
Caffeine
A rubber duck
A bit of patience
So go build it. Make your app unstoppable. And when it breaks?
You've got logs. And this blog.
Final Thought
This isn’t a shiny tech tutorial.
It’s one dev telling another:
Here’s what worked.
Here’s what sucked.
Here’s why I’d still do it again.
Now go forth. Progressive-web your app into glory.
Or at least, make it load offline before your users rage-quit.
Got questions about PWAs, Next.js 15, or service worker trauma? Drop them below.