Next.js, Capacitor, and Electron: Cross-Platform with a Single Codebase

In today's digital landscape, existing only in web browsers can fall short. Users want to access your apps from their phones (Android/iOS), or run them with seamless performance on their desktop (Windows/macOS). Writing separate native apps in different languages (Java/Kotlin, Swift, C#) for each platform is devastating in terms of time and budget, especially for small studios. At Polimelo studio, we solve this problem using a modern hybrid architecture: React/Next.js, Capacitor.js, and Electron integration.

Technological Architecture

At the center of our system is a single Next.js project that handles the user interface (UI) and all business logic. We distribute this project to three different platforms as follows:

1. Web: By utilizing Next.js's output: 'export' config, we produce static HTML/JS/CSS files. We can distribute these assets globally at high speeds on Cloudflare Pages or Vercel.
2. Mobile (Android): With the help of Capacitor.js, we take our static web build and embed it inside a native Android project (WebView). Capacitor establishes bridges that let our web code access the phone's native APIs (notifications, file system, etc.).
3. Desktop: Using Electron, we turn our static build into a desktop application powered by Chromium and Node.js. This allows our game Syncron to run as a native game on Steam.

Next.js and Static Export Challenges

Next.js defaults to focusing on server-side rendering (SSR). However, since mobile and desktop packagers (Capacitor/Electron) do not have a Node.js server, they require completely static assets. Consequently, we had to avoid dynamic server-side routing in our Next.js project. For our dynamic pages (such as the detail of this blog post under /blog/[slug]), we used the generateStaticParams function to generate all pages as static HTML files during the build phase.

Data Sharing and Offline Support Across Platforms

Another major challenge was local database management. Storing data in a browser is easy, but data must be preserved on mobile and desktop when the app closes or the internet connection drops. We solved this issue by using Dexie.js (IndexedDB wrapper). Since IndexedDB is standardly supported in modern browsers, Capacitor WebViews, and Electron environments, we built a local, offline-first database that works across all platforms using a single codebase. When the device connects to the internet, synchronization with Firebase Firestore is triggered.

If you are an independent developer looking to quickly deploy your products to all devices, the Next.js + Capacitor + Electron trio is an excellent choice that minimizes code duplication and accelerates product development speed by 3x.