DEV Community: The Beyond Horizon

Building a Progressive Web App (PWA) with Next.js: A Complete 2025 Guide

The Beyond Horizon — Fri, 29 May 2026 06:12:03 +0000

What Makes an App “Progressive”?
A Progressive Web App (PWA) is a web application that uses modern browser APIs to deliver app-like experiences. The “progressive” refers to enhancement — a PWA works for every user on every browser, but users on modern browsers get enhanced capabilities like offline access, install prompts, and push notifications.

For businesses, PWAs sit in a sweet spot: build once (web), deploy everywhere (browser + installable on iOS and Android home screens), no app store friction, instant updates. For our clients in e-commerce and healthcare, PWAs have delivered 40–60% reductions in mobile bounce rates compared to their previous mobile web experiences.

The Three Pillars of PWA

HTTPS: PWAs require a secure origin. All modern production web hosting (Vercel, Netlify, Railway) provides this automatically.
Web App Manifest: A JSON file that tells the browser how to present your app when installed — icon, name, theme color, display mode.
Service Worker: A JavaScript file that runs in the background, separate from your main thread. It intercepts network requests, enabling offline caching, background sync, and push notifications.

Setting Up PWA in Next.js
The cleanest approach for Next.js 14/15 uses the next-pwa package with workbox-webpack-plugin.

Install
Run: npm install next-pwa

Configure next.config.ts
Wrap your Next.js config with withPWA, setting dest to “public”, disabling in development, and enabling register and skipWaiting. This generates sw.js and workbox files in your public directory during build.

Create Web App Manifest
Create public/manifest.json with your app name, short name, description, start URL set to “/”, display mode as “standalone”, background and theme colors, and icons at 192x192 and 512x512 pixels. Include a screenshots array for rich install prompts on Android.

Link Manifest in layout.tsx
Add manifest: “/manifest.json” and themeColor to your metadata export. Also add appleWebApp settings with capable: true for iOS home screen support.

Caching Strategies
Service workers intercept fetch requests. You choose how each resource is cached:

Learn about Medium’s values
Cache First: Check cache, use network only if not cached. Best for static assets (images, fonts, CSS). Set long expiration (365 days).

Network First: Try network, fall back to cache if offline. Best for API responses where fresh data matters. Set short expiration (5 minutes).

Stale While Revalidate: Return cached version immediately, update cache from network in background. Best for non-critical data where speed matters more than freshness.

Configure these in next-pwa’s runtimeCaching array, with separate entries for fonts (CacheFirst), API routes (NetworkFirst), and images (CacheFirst with 30-day expiration).

Install Prompt UI
Browsers show a native install prompt, but you can create a custom one for better conversion. Listen for the beforeinstallprompt event in a useEffect hook, store the event in state, and call event.prompt() when the user clicks your install button. Hide the banner once the appinstalled event fires.

Push Notifications
Push notifications require a push subscription and a backend to send messages. The Web Push API uses VAPID keys for authentication. Generate them with: npx web-push generate-vapid-keys.

Store the public key in your manifest and register a push subscription in your service worker. Your backend sends push messages using the web-push npm package, passing the subscription object and a JSON payload with title, body, and icon.

This is exactly the pattern we use for Kafe Kufe our cafe management platform uses push notifications to alert kitchen staff of new orders in real-time, even when the browser is closed.

PWA Checklist Before Launch
-Manifest linked in document head

-192x192 and 512x512 PNG icons exist

-Service worker registered and active

-Offline fallback page at /offline

-Lighthouse PWA score > 90

-Tested install flow on Android Chrome

-Tested on iOS Safari (limited PWA support, but addable to home screen)

-Want help building a PWA for your next project? Start a conversation.

Originally published at https://www.thebeyondhorizon.com on February 20, 2025.

Web Development
Nextjs
JavaScript
React
Progressive Web Apps

Why Indian Startups Are Betting on Next.js: A Developer's Perspective

The Beyond Horizon — Wed, 27 May 2026 07:26:05 +0000

The Indian Startup Tech Shift
India's startup ecosystem launched 1,600+ technology startups in 2024. Visit the GitHub repository or inspect the source of almost any of them and you'll see the same stack: Next.js, TypeScript, Tailwind CSS, and increasingly, Vercel or Railway for hosting.

This isn't a coincidence. Specific characteristics of Indian startup culture and the Indian internet market have made Next.js the dominant choice. Having built products for startups from Ajmer to Bangalore, we've seen these patterns firsthand.

The SEO Imperative
Indian startups compete for attention in a market where organic search is the primary discovery channel. Paid advertising costs on Google and Meta have risen sharply — CPCs in health, finance, and education verticals now rival US prices, but LTV (lifetime value) per customer is lower.

For most Indian B2C startups, organic SEO isn't optional — it's the growth channel. Next.js delivers server-rendered HTML that search engines index without JavaScript execution. This alone explains a significant portion of its adoption.

Our client HRDYAM (a spiritual travel platform) saw 312% organic traffic growth in six months after migrating from a React SPA to Next.js. The content was identical. The server rendering is what moved the needle.

The Mobile-First Reality
India is a mobile-first internet market. As of 2025, 75%+ of Indian internet usage is on smartphones, with a significant portion on 4G networks rather than WiFi. Page load time isn't a nice-to-have — it directly determines whether users stay.

Next.js addresses this through:

Automatic code splitting: Only the JavaScript for the current page loads. A user browsing your homepage doesn't download the checkout page's JavaScript.

Image optimization: The next/image component serves WebP to Chrome users (85%+ of Indian Android market) and appropriate sizes for the requesting device's viewport. A desktop hero image isn't served to a 360px mobile screen.

Edge rendering: Vercel's Edge Network has a Mumbai point-of-presence. Server-side rendered pages hit an edge node 20-50ms from Indian users, not a US data center 200ms away.

Streaming: Next.js 13+ supports React Suspense streaming. The browser starts rendering immediately while data-fetching components load in the background.

The Developer Market Reality
India produces 1.5 million engineering graduates annually. The overwhelming majority learn JavaScript. React is the most widely taught UI library in Indian bootcamps and university curricula.

Next.js extends this investment. A React developer becomes productive in Next.js within days. The routing conventions, component model, and state management patterns are identical. Only the data fetching and deployment model needs learning.

This creates a massive hiring advantage. A startup choosing Next.js can hire from India's enormous JavaScript talent pool. A startup that chose SvelteKit or Nuxt.js narrows that pool significantly.

Cost Efficiency
Indian startups are capital-efficient by necessity. The typical Series A in India is $2-5M versus $10-20M in the US — teams need to do more with less.

The Vercel + Next.js combination eliminates infrastructure complexity that would otherwise require dedicated DevOps:

Automatic preview deployments for every PR
Zero-configuration CDN
Serverless functions for API routes
Automatic HTTPS and edge caching
A two-person engineering team can ship and maintain a production Next.js app that would require a dedicated infrastructure engineer if built on traditional server infrastructure.

The Composable Commerce Opportunity
India's e-commerce market is growing 25% annually. Startups building commerce experiences need fast product page rendering (SEO + conversion), real-time inventory, payment gateway integration (Razorpay, PhonePe, UPI), and WhatsApp commerce integration.

Next.js slots into all of these. API routes handle Razorpay webhooks. generateStaticParams pre-generates product pages at build time. revalidatePath updates them when inventory changes.

Our client Pristine Bites — an artisanal food e-commerce brand — runs entirely on Next.js with WhatsApp order notifications via the WhatsApp Business API. Monthly revenue doubled in the quarter after launch.

What to Watch in 2025-2026
Server Actions are maturing. Direct form submissions to server-side mutations without API route boilerplate is simplifying full-stack development significantly.

React Compiler (released 2024) eliminates most manual memoization. Code becomes simpler, performance improves by default.

Partial Prerendering (Next.js 15 experimental) combines static shell delivery with dynamic content streaming — potentially the biggest page speed improvement since SSR itself.

For Indian startups competing on speed and SEO in a mobile-first market with capital constraints, Next.js isn't just a good choice — it's increasingly the obvious one.

We've built 40+ projects at The Beyond Horizon, the majority with Next.js. Want to build yours? Let's talk.

React Native vs Flutter in 2025: A Practical Guide for Mobile App Development

The Beyond Horizon — Mon, 25 May 2026 20:40:32 +0000

The Cross-Platform Mobile Question
Building for iOS and Android simultaneously is the default expectation for most products today. Writing two separate native codebases (Swift/Kotlin) doubles your development cost and creates perpetual synchronization headaches. Cross-platform frameworks exist to solve this — and React Native and Flutter are the two dominant choices.

After building mobile applications for clients across fintech, healthcare, and e-commerce verticals, we've developed strong intuitions about when each framework excels. Here's what we've learned.

React Native: The JavaScript Path
React Native, maintained by Meta, lets JavaScript developers build mobile apps using React paradigms. Components, props, hooks, and the React mental model transfer directly from web development.

The biggest advantage: If your team already builds with React for the web, React Native drastically lowers the mobile barrier. Shared business logic, shared API clients, even some shared UI components between web and mobile — this is genuinely achievable.

The architecture: React Native bridges JavaScript code to native components. Your View component renders as UIView on iOS and android.view.View on Android. This means your UI is truly native — not a web view, not a canvas. Users get native scroll physics, native text rendering, and native accessibility.

Performance profile: React Native performs excellently for business applications — CRUD interfaces, forms, lists, navigation. The JavaScript bridge introduces latency for highly animated UIs or computationally intensive tasks. Meta's New Architecture (JSI + Fabric) largely addresses this, but adoption across the ecosystem is still maturing.

Ecosystem: The npm ecosystem is enormous. Need Stripe payments, Firebase, maps, AR, biometrics? The packages exist. Community support is vast — Stack Overflow answers, GitHub issues, YouTube tutorials.

The tradeoff: Debugging cross-platform behavior can be tricky. A bug that only appears on specific Android API levels, an iOS-specific gesture conflict, or a package that works on one platform but not the other — these issues consume time. You're always one library update away from a dependency conflict.

Flutter: Google's Approach
Flutter, built by Google, takes a fundamentally different approach. Instead of mapping to native components, Flutter renders everything using its own graphics engine (Skia/Impeller). Think of it as a game engine for mobile UIs.

The biggest advantage: Pixel-perfect UI consistency across platforms. What you see in your Flutter UI on iOS is bit-for-bit identical on Android. No platform-specific rendering quirks, no font differences, no shadow inconsistencies. Designers love this.

The architecture: Flutter uses Dart, Google's compiled programming language. Dart compiles ahead-of-time to native ARM code. There's no JavaScript bridge — Flutter code runs directly on the device.

Performance profile: Flutter's rendering performance is exceptional. 60fps (or 120fps on ProMotion displays) is the default, not the achievement. Complex animations, custom graphics, and gesture-heavy interfaces are Flutter's comfort zone. Our clients in fintech and healthcare — where rich, responsive dashboards matter — consistently prefer Flutter.

Dart learning curve: Dart is a modern, typed language that any JavaScript developer can learn in a week. But it's still a new language to learn. The ecosystem is smaller than npm — you'll occasionally find that a library doesn't exist yet and you'll need to write a platform channel or a native plugin yourself.

Hot reload: Flutter's hot reload is genuinely instant. Change your UI, see the change in under a second without losing app state. React Native's Fast Refresh is good, but Flutter's is better.

The Honest Performance Comparison
Both frameworks perform well for typical mobile apps. The performance gap matters in specific scenarios:

Scenario React Native Flutter
Complex animations Good Excellent
Large lists (10k+ items) Good with FlatList Good with ListView.builder
Native platform APIs Excellent Good (platform channels)
Web parity / code sharing Excellent Limited
Custom rendering Limited Excellent
Bundle size ~7MB baseline ~5MB baseline
When to Choose React Native
Your team has React/JavaScript expertise
You need to share logic between web and mobile apps
You're building a business application with standard UI patterns
Time-to-market is critical and you can't afford a new language
Your app heavily relies on third-party JavaScript libraries
When to Choose Flutter
Pixel-perfect design consistency is a requirement
Your app has complex animations or custom UI elements
You're targeting platforms beyond iOS/Android (web, desktop, embedded)
Performance in animation-heavy interfaces is critical
You're building a greenfield project without web counterpart
What We Build At The Beyond Horizon
We're fluent in both frameworks. For our client projects, we default to React Native for business applications where web-mobile code sharing adds value, and Flutter for consumer apps where visual excellence and animation performance are differentiators.

For the YUMI project — an AI plushie e-commerce app where delightful animations are core to the brand experience — Flutter was the clear choice. For internal enterprise tools and data-heavy dashboards, React Native's JavaScript ecosystem provides faster delivery.

The "best" framework is the one your team can ship with confidence. Want to discuss which fits your project? Talk to us.

Next.js vs React: Choosing the Right Framework for Your 2025 Web Project

The Beyond Horizon — Mon, 25 May 2026 20:39:35 +0000

The Question Every Team Faces
When a startup or enterprise approaches us to build their web application, one of the first architectural decisions we make together is: Next.js or plain React? After building 150+ projects at The Beyond Horizon, we have a clear, data-backed answer — but the nuance matters.

What Is React Without Next.js?
React is a JavaScript library for building user interfaces. It handles the view layer of your application brilliantly. You get component-based architecture, a powerful state system, and a massive ecosystem. But React alone gives you:

No server-side rendering (SSR) out of the box
No built-in routing (you need React Router or similar)
No image optimization
No built-in API routes
A blank canvas for every convention
This means your team makes hundreds of decisions before writing a single business-logic line. For prototypes and learning projects, this flexibility is great. For production applications with real users, it often becomes a liability.

What Next.js Adds
Next.js is a full-stack React framework built by Vercel. It provides everything React is missing:

Rendering Strategies: Choose per-page whether to render on the server (SSR), generate at build time (SSG), use Incremental Static Regeneration (ISR), or keep things client-side (CSR). This granular control is impossible with plain React.

The App Router: Introduced in Next.js 13 and refined through 15, the App Router brings React Server Components. Your data-fetching components run on the server — zero JavaScript shipped to the browser for those components. For content-heavy sites, this can cut your client-side bundle by 40-60%.

Built-in Image Optimization: The next/image component automatically serves WebP and AVIF formats, lazy-loads images, prevents layout shift, and resizes to the requested dimensions. A 4MB PNG becomes a 200KB WebP served from a CDN edge node. We've seen this single change reduce LCP scores from 4.5s to under 1.5s.

File-System Routing: No routing library configuration. A file at app/about/page.tsx becomes /about. Nested folders create nested routes. Dynamic segments use [slug] syntax. Parallel routes and intercepted routes handle complex UI patterns without custom logic.

API Routes: Write backend endpoints in the same repository. A file at app/api/contact/route.ts becomes a POST endpoint. For many projects, this eliminates the need for a separate backend service.

SEO by Default: Server-rendered HTML means search engine crawlers see your content immediately. The Metadata API gives type-safe, per-page metadata with automatic Open Graph generation.

When Plain React Makes Sense
Despite Next.js's advantages, raw React wins in specific scenarios:

Internal tools and dashboards: If your app is behind authentication and never indexed by search engines, SSR provides no SEO benefit. A Vite + React setup builds and deploys faster.

Highly interactive single-page apps: Complex state machines, real-time collaborative tools, or canvas-based applications that are entirely client-side may not benefit from SSR. Our Cranva project — a real-time collaborative canvas tool — uses this pattern.

When you need full framework freedom: Some teams have strong opinions about routing, state management, or data fetching. Next.js has opinions too. If they conflict with your team's architecture, fighting the framework costs more than the benefits it provides.

Electron or React Native apps: The web-specific optimizations in Next.js don't apply in desktop or mobile contexts.

The Performance Case for Next.js
Core Web Vitals directly influence Google Search rankings. Here's how Next.js specifically addresses each metric:

LCP (Largest Contentful Paint): Server-side rendering means the browser receives HTML with content already present. Combined with next/image priority loading for above-fold images, we consistently achieve LCP under 2.5s for Next.js sites vs 3-5s for unoptimized React SPAs.

INP (Interaction to Next Paint): React Server Components reduce the client-side JavaScript that must parse and execute before the page becomes interactive. Less JS = faster interactivity.

CLS (Cumulative Layout Shift): next/image requires width and height attributes, which reserves space before the image loads. This alone eliminates the most common source of layout shift on image-heavy sites.

Our Recommendation
For 90% of projects — marketing sites, e-commerce, SaaS products, portfolios, content platforms, and API-backed applications — choose Next.js. The performance improvements, SEO benefits, and developer experience advantages compound over time.

For the remaining 10% — internal dashboards, real-time collaborative tools, and projects where your team's existing React expertise conflicts with Next.js conventions — evaluate carefully.

At The Beyond Horizon, our default stack is Next.js 15 + TypeScript + Tailwind CSS + PostgreSQL. We've refined this stack across 150+ projects and it consistently delivers fast, maintainable, production-ready applications.

Want to discuss which approach fits your project? Get in touch — we offer free architecture consultations.