Next.js-App für iOS und Android: Wrapper, Capacitor oder Neubau

Drei Fragen vor der Entscheidung

Bevor Sie ein Framework wählen, lohnt ein ehrlicher Blick auf die eigene Codebasis. Drei Fragen klären meist schon die Richtung:

1. Wie viel läuft auf dem Server? Nutzt die App Server Components, Server Actions, Route Handler oder Middleware, verliert ein gebündelter Build genau diese Teile.
2. Muss die App offline arbeiten? Außendienst, Lager oder Baustelle sprechen für lokale Datenhaltung und eher für einen nativen Neubau.
3. Wie oft ändern Sie das Produkt? Wer wöchentlich ausliefert, profitiert davon, dass Web-Deployments ohne erneute Store-Prüfung in der App ankommen.

Die Optionen im Vergleich

Nativer Wrapper: Eine native Hülle lädt Ihre produktive Next.js-Instanz. SSR, Server Actions und Middleware bleiben unverändert, native Funktionen kommen über eine JavaScript-Brücke dazu. Aufwand: Tage.

Capacitor: Die Web-Assets liegen in der App. Dafür braucht Next.js output: 'export'. Ohne Server zur Laufzeit entfallen Server Actions, dynamische Route Handler, Middleware und der Standard-Loader von next/image. Sinnvoll, wenn die App ohnehin überwiegend clientseitig gegen eine separate API arbeitet.

React Native mit Expo: Neue Oberfläche, gemeinsam genutzt werden TypeScript-Typen, Validierungsschemata und API-Clients. Expo Router arbeitet dateibasiert und ist Next.js-Teams daher vertraut. Jeder Screen wird jedoch neu gebaut.

Unsere Faustregel aus der Praxis: Portale, Kundenbereiche, Dashboards und B2B-Werkzeuge starten fast immer gut mit einem Wrapper. Sollte sich später zeigen, dass einzelne Bereiche nativ sein müssen, lassen sich diese gezielt ersetzen – etwa ein Scanner oder eine Offline-Erfassung –, ohne die gesamte Anwendung neu zu schreiben. Ein vollständiger Neubau zum Start ist nur selten die wirtschaftlichste Wahl.

Login: Cookies, OAuth und Sign in with Apple

Lädt der Wrapper Ihre eigene Domain, funktionieren httpOnly-Session-Cookies von Auth.js, Supabase oder einer eigenen Lösung wie im Browser. Typische Stolpersteine liegen woanders:

• Google lässt den OAuth-Login in eingebetteten Webviews nicht zu. Der Anbieter muss im Systembrowser öffnen (ASWebAuthenticationSession bzw. Custom Tabs).
• Systembrowser und Webview haben getrennte Cookie-Speicher. Bewährt hat sich ein kurzlebiger Einmal-Code im Rücksprung-Link, den die Webview gegen eine Session tauscht.
• Bieten Sie Logins über Drittanbieter an, erwartet Apple in der Regel eine gleichwertige datenschutzfreundliche Option wie Sign in with Apple.

Universal Links und App Links in Next.js

iOS prüft /.well-known/apple-app-site-association – ohne Dateiendung, als JSON, per HTTPS und ohne Weiterleitung. Android prüft /.well-known/assetlinks.json. Bei Play App Signing gehört dort der SHA-256-Fingerabdruck des App-Signaturschlüssels aus der Play Console hinein, nicht der Ihres Upload-Schlüssels.

Legen Sie beide Dateien unter public/.well-known/ ab und setzen Sie den Content-Type per headers() in der next.config. Häufigster Fehler bei deutschsprachigen Projekten: Eine i18n-Middleware leitet /.well-known/ auf /de/.well-known/ um, und die Verifizierung schlägt still fehl. Schließen Sie den Pfad im Matcher aus.

Push-Benachrichtigungen und Einwilligung

In der App laufen Benachrichtigungen über APNs und Firebase Cloud Messaging, nicht über Web Push. Die native Schicht holt die Erlaubnis ein und übergibt das Geräte-Token an Ihr Frontend, das Backend speichert es pro Nutzer. Für DSGVO-Zwecke gilt: Die Systemabfrage ersetzt nicht Ihre Datenschutzerklärung. Beschreiben Sie dort, welche Dienste Tokens verarbeiten. Ein Cookie-Banner, das im Browser sinnvoll ist, sollte in der App nicht bei jedem Start erneut erscheinen – prüfen Sie, ob die Einwilligung dauerhaft gespeichert wird. Dies ist keine Rechtsberatung.

So unterstützt jocapps

WebViewGold macht aus Ihrer Next.js-Anwendung native iOS- und Android-Apps mit Push, Offline-Modus und mehr als 40 nativen APIs – als Einmalkauf. Möchten Sie Xcode und Android Studio nicht selbst bedienen, liefert WeSetupYourWebViewApp die store-ready Apps innerhalb von 72 Stunden inklusive Quellcode. Für Capacitor-Projekte, einen Neubau mit React Native oder Wartung mit SLA steht unser Delivery-Team OnlineAppCreator bereit. Grundlagen zum Thema finden Sie im Leitfaden Website in eine App umwandeln.

Sie möchten Ihre Architektur kurz einordnen lassen? Vereinbaren Sie ein kostenloses 30-minütiges Erstgespräch.