MENU

Going Mobile

"Making a Next.js app mobile" can mean several very different things depending on how much native behavior you actually need. There is no single official path -- Next.js itself only produces a web app -- so the right approach depends on how much of the mobile app store experience, offline support, and native device access you want, versus how much extra code and infrastructure you're willing to maintain.

Broadly, the options fall on a spectrum from "reuse everything, ship almost nothing new" to "build a genuinely separate app":

Installable PWA

Add a manifest.json file and a service worker to your existing Next.js app, and browsers on Android (and, with more limitations, iOS) let users "install" it to their home screen with an app icon, a splash screen, and optional offline caching. No app store, no separate codebase, no new language -- your existing Next.js app is the app. This is by far the lowest-effort option and, for most content-driven or dashboard-style sites, is enough. See Progressive Web App.

Wrap the live site in a native shell (react-native-webview)

If you specifically want a listing in the Apple App Store or Google Play Store without rebuilding your UI, you can create a thin React Native app whose only real screen is a <WebView> pointed at your deployed Next.js URL. You get an installable, store-distributed app icon with minimal new code, at the cost of feeling less "native" and needing a network connection. See React Native WebView.

Wrap your own build in a native shell with native API access (Capacitor)

Ionic Capacitor takes a similar "wrap the web app" approach, but wraps a static build you export and ship inside the app itself (rather than always loading a live URL), and gives you plugin-based access to native device APIs like the camera, filesystem, and push notifications. It's a middle ground between a plain WebView and a full native rewrite. See Capacitor.

A genuinely separate native app (React Native)

If you need real native performance, native navigation gestures, or deep native API access beyond what a plugin bridge offers, you build a separate React Native app. It shares the React mental model and, if you're careful about your architecture, some business logic and API-client code with your Next.js app -- but the UI layer, routing, and anything Next.js-specific (Server Components, Route Handlers, the App Router) has to be rewritten against React Native's own primitives. See React Native.

The rest of this chapter walks through each of these four approaches in more detail, roughly in order of increasing effort and increasing native capability.