Wandeln Sie Ihre Next.js-Anwendung in eine iOS- und Android-App mit Capacitor 8 um

Einleitung

Haben Sie bereits eine Next.js Webanwendung? In dieser Anleitung lernen Sie, wie Sie sie in native iOS- und Android-Mobilanwendungen umwandeln können. Capacitor 8 — die neueste Version mit verbessertem Leistung und neuen Funktionen.

Capacitor umhüllt Ihre Webanwendung in einen nativen Container, der Ihnen Zugriff auf Geräte-APIs wie Kamera, Dateisystem und Benachrichtigungen bietet, während Ihre bestehende React-Codebasis erhalten bleibt. Im Gegensatz zu React Native müssen Sie nichts umschreiben — Ihre Next.js code läuft unverändert.

Was Sie lernen werden:

Ihre bestehende Next.js-Anwendung für statische Export konfigurieren
Capacitor 8 mit wesentlichen nativen Plugins hinzufügen
Auf iOS- und Android-Emulatoren bauen und testen
Live-Reload für schnellere Entwicklung aktivieren
Optional Konsta UI für native aussehende Komponenten hinzufügen

Sind Sie auf der Suche nach einem neuen Projekt von Grund auf? Überprüfen Sie unsere Anleitung Ein Next.js-Mobilanwendung von Grund auf aufbauen.

Vorteile der Verwendung von Next.js und Capacitor

Code-Reusability: Next.js ermöglicht Ihnen, wieder verwendbare Komponenten zu schreiben und code zwischen Ihrer Web- und Mobilanwendung zu teilen, wodurch Entwicklungszeit und -bemühungen eingespart werden.
Leistung: Next.js bietet integrierte Leistungsoptimierungen, wie z.B. Server-Seiten-Rendern und code-Splitting, um schnelle Ladezeiten und eine glatte Benutzererfahrung sicherzustellen.
Nativfunktionen: Capacitor bietet Zugriff auf nativere Gerätefunktionen wie Kamera, Geolocation und mehr, um feature-reiche Mobilanwendungen zu erstellen.
Einfache Entwicklung: Mit Capacitor können Sie Ihre Mobilanwendung entwickeln und testen, indem Sie bekannte Webtechnologien verwenden, wodurch die Lernkurve verringert und der Entwicklungsprozess gestreamt wird.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie folgende Voraussetzungen erfüllen:

Node.js 18+ installiert
Ein bestehendes Next.js 15+ Anwendung
Xcode (für iOS-Entwicklung, macOS nur)
Android Studio (für Android-Entwicklung)

Konfigurieren Sie Ihre Next.js-Anwendung für das Mobile

Der erste Schritt besteht darin, Ihre Next.js-Anwendung für die statische Exportierung zu konfigurieren. Capacitor benötigt statische HTML/JS/CSS-Dateien, um sie in die native App zu bündeln.

Öffnen Sie Ihr next.config.js (oder next.config.ts) Datei und fügen Sie die Exportkonfiguration hinzu:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Die output: 'export' Einstellung erzwingt Next.js, statische HTML-Dateien zu generieren, und images: { unoptimized: true } überspringt die Next.js-Bildoptimierung, die einen Server erfordert.

Wichtig: If you’re using features that require a server (API routes, server components with data fetching, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Fügen Sie mobile spezifische Skripte zu Ihrem package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "mobile": "bun run build && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

Testen Sie die statische Exportierung, indem Sie laufen:

bun run build

Sie sollten ein out Verzeichnis am Root Ihres Projekts sehen. Dies enthält alle statischen Dateien, die Capacitor in Ihre native App einbinden wird.

Hinzufügen von Capacitor 8 zu Ihrem Projekt

Um Ihre Next.js-App in einen nativen mobilen Container zu packen, folgen Sie diesen Schritten:

Installieren Sie Capacitor Core und CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

Installieren Sie die gängigen Capacitor-Plugins, die Sie wahrscheinlich benötigen:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

Diese Plugins liefern wichtige Funktionen:

@capacitor/app: Behandeln Sie Ereignisse im Lebenszyklus der App (Vordergrund/Hintergrund, URLs)
@capacitor/keyboard: Kontrollieren Sie das Verhalten der Tastatur auf dem Mobilgerät
@capacitor/splash-screen: Verwalten Sie die native Splash-Screen
@capacitor/preferences: Speichern Sie Schlüssel-Wert-Daten persistent

Initialisiere Capacitor mit deinen Projekt-Daten:

bunx cap init my-app com.example.myapp --web-dir out

Ersetze my-app mit deinem App-Namen und com.example.myapp mit deiner App-ID (umgekehrte Domänennotation).

Erstelle oder aktualisiere das capacitor.config.ts Datei mit der richtigen Konfiguration:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
    },
  },
};

export default config;

Installiere native Plattformen:

bun add @capacitor/ios @capacitor/android

Füge die native Plattform-Ordner hinzu:

bunx cap add ios
bunx cap add android

Capacitor wird ios und android Ordner am Root deines Projekts erstellen, die die native Projekte enthalten.

Um das Android-Projekt zu bauen, benötigst du Android StudioFür iOS benötigen Sie einen Mac mit Xcode.

Bauen und synchronisieren Sie Ihr Projekt:

bun run mobile

Dies läuft Ihren benutzerdefinierten Skript aus, das das Next.js-Projekt erstellt und die statischen Dateien mit den nativen Plattformen synchronisiert.

Erstellung und Bereitstellung von nativen Apps

Um Ihre native mobile App zu erstellen und zu bereitstellen, folgen Sie bitte diesen Schritten: Um iOS-Apps zu entwickeln, müssen Sie Xcode installiert haben, und für Android-Apps müssen Sie Android Studio installiert haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Öffnen Sie die native Projekte:

Für iOS:

bun run mobile:ios

Für Android:

bun run mobile:android

Oder direkt mit Capacitor CLI:

bunx cap open ios
bunx cap open android

Die App erstellen und ausführen:

android-studio-run

In Android Studio wartet man auf das Projekt, und klickt dann auf den „Ausführen“-Button, um die App auf einem verbundenen Gerät oder Emulator zu deployen.
In Xcode stellt man sein Signierkonto ein, um die App auf einem realen Gerät zu deployen. Wenn man das noch nicht gemacht hat, wird Xcode einen durchgeführten Prozess anbieten (wobei man sich im Apple Developer Programm angemeldet haben muss). Sobald man eingerichtet ist, klickt man auf den „Play“-Button, um die App auf dem verbundenen Gerät auszuführen.

Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Next.js Web-App auf einem mobilen Gerät deployt.

Aber halt, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun...

Capacitor Live Reload

Während der Entwicklung können Sie von der Live-Neuladung profitieren, um Änderungen sofort auf Ihrem Mobilgerät zu sehen. Um diese Funktion zu aktivieren, folgen Sie diesen Schritten:

Finden Sie Ihre lokale IP-Adresse:

Auf macOS ausführen Sie folgenden Befehl im Terminal:
```
ipconfig getifaddr en0
```
Auf Windows ausführen Sie:
```
ipconfig
```
Suchen Sie nach der IPv4-Adresse in der Ausgabe.

Aktualisieren Sie Ihre capacitor.config.ts um auf Ihren Entwicklungsserver zu verweisen:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

export default config;

Ersetzen Sie YOUR_IP_ADDRESS mit Ihrer lokalen IP-Adresse (z.B. 192.168.1.100).

Anwenden Sie die Änderungen an Ihrem nativen Projekt:

bunx cap copy

Der copy Befehl kopiert das Web-Ordner und die Konfigurationsänderungen in das native Projekt ohne das Update des gesamten Projekts.

Mit Android Studio oder Xcode das App auf Ihrem Gerät neu erstellen und ausführen.

Jetzt werden alle Änderungen an Ihrer Next.js App automatisch auf dem mobilen Gerät neu geladen.

Hinweis: Wenn Sie neue Plugins installieren oder Änderungen an native Dateien vornehmen, müssen Sie das native Projekt neu erstellen, da live-Neuladen nur auf Web code-Änderungen anwendbar ist.

Mit Capacitor-Plugins

Capacitor-Plugins ermöglichen Ihnen, Zugriff auf native Gerätefeatures von Ihrer Next.js App zu erhalten. Lassen Sie uns herausfinden, wie man die Teilen-Plugin als Beispiel verwendet:

Das Teilen-Plugin installieren:

bun add @capacitor/share

Die pages/index.js Datei aktualisieren, um das Teilen-Plugin zu verwenden:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';

export default function Home() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends',
    });
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Capgo!</a>
        </h1>

        <p className={styles.description}>
          <h2>Cool channel</h2>
          <button onClick={() => share()}>Share now!</button>
        </p>
      </main>
    </div>
  );
}

Die Änderungen mit dem native Projekt synchronisieren:

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie den folgenden Befehl aus:

bun run mobile

Oder synchronisiere einfach ohne Neubau:

bunx cap sync

Rebuild und führe das App auf deinem Gerät aus.

Jetzt, wenn du auf den „Jetzt teilen!“-Button klickst, erscheint das native Teilen-Dialog, sodass du den Inhalt mit anderen Apps teilen kannst.

Um den Button mobilerfreundlicher aussehen zu lassen, können wir einige Stile hinzufügen, indem wir unsere Lieblings-Bibliothek für UI-Komponenten für Web-Apps verwenden - Next.js (kein Witz).

Konsta UI v5 mit Tailwind CSS 4 hinzufügen

Ich habe Jahre mit Ionic gearbeite, um großartige cross-plattform-Apps zu erstellen und es war eines der besten Wahl für Jahre. Aber jetzt empfehle ich es nicht mehr, da es sehr hackig ist, es mit Next.js zu integrieren und es nicht wirklich wert ist, wenn du bereits Tailwind CSS 4.

hast, wenn du eine wirklich großartige aussehende mobile UI möchtest, die sich an iOS- und Android-spezifische Stile anpasst, empfehle ich Konsta UI v5.

Du musst haben Tailwind CSS 4 ist bereits installiert Um die mobilen Benutzeroberfläche Ihrer Next.js-Anwendung zu verbessern, können Sie Konsta UI v5, eine mobile-freundliche Bibliothek für UI-Komponenten, die sich an die iOS- und Android-Styling anpasst. Führen Sie diese Schritte aus, um Konsta UI v5 zu integrieren:

Installieren Sie die erforderlichen Pakete (Konsta UI v5):

bun add konsta

Importieren Sie das Konsta UI-Thema in Ihrem Haupt-CSS-Datei (z.B. styles/globals.css):

@import 'tailwindcss';
/* import Konsta UI v5 theme */
@import 'konsta/theme.css';

Konfigurieren Sie Tailwind CSS 4 für Next.js (PostCSS):

Erstellen Sie postcss.config.mjs am Projektroot:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Tailwind v4 verwendet PostCSS direkt in Next.js. Halten Sie Ihre globalen Imports in styles/globals.css (bereits oben hinzugefügt).

Umgeben Sie Ihre App mit Konsta UI v5 App Komponente in pages/_app.js:

import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

Beispiel-Seite

Jetzt, wenn alles eingerichtet ist, können wir Konsta UI v5 React-Komponenten in unseren Next.js-Seiten verwenden.

Aktualisieren Sie das pages/index.js Datei, um Konsta UI v5-Komponenten zu verwenden:

import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

Fügen Sie die Roboto-Schriftart für das Material-Design-Thema hinzu (erforderlich für Konsta UI v5):

In Ihrer pages/_document.js oder der Haupt-HTML-Datei, fügen Sie hinzu:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

Starten Sie den Entwicklungsserver neu und bauen Sie die App neu.

Ihre Next.js-App sollte jetzt eine nativ anmutende mobile Benutzeroberfläche mit Konsta UI v5 und gestaltet mit Tailwind CSS 4 haben.

Leistungsoptimierung

Um die optimale Leistung Ihrer Next.js- und Capacitor-App sicherzustellen, sollten Sie die folgenden Best Practices beachten:

Die App-Größe minimieren, indem Sie ungenutzte Abhängigkeiten und Assets entfernen.
Optimieren Sie Bilder und andere Mediendateien, um die Ladezeiten zu reduzieren.
Implementieren Sie die lazy Loading für Komponenten und Seiten, um die Initialisierungsleistung zu verbessern.
Verwenden Sie die Server-Seiten-Rendering (SSR) mit Next.js, um die Ladezeit der App und die Suchmaschinenoptimierung (SEO) zu verbessern.
Nutzen Sie die Capacitor-integrierten Optimierungen, wie z.B. das Caching des Web-Views und die App-Bündelung.

Fazit

Sie haben erfolgreich Ihre bestehende Next.js-Webanwendung in native iOS- und Android-Apps umgewandelt, indem Sie Capacitor 8 verwendet haben. Ihre Web-Codebasis läuft nun nativ auf mobilen Geräten mit Zugriff auf Geräteeingaben.

Wat haben Sie erreicht:

Next.js für statische Exporte konfiguriert
Capacitor 8 mit wichtigen Plugins hinzugefügt
Für iOS- und Android-Simulator gebaut und bereitgestellt
Live-Reload für die Entwicklung aktiviert
Optionally hinzufügen Sie Konsta UI für native aussehende Komponenten

Weitere Schritte:

Einrichten Capgo für über das Internet erfolgende Updates ohne Wiederholung im App Store
Hinzufügen Sie weitere native Plugins wie Kamera, Geolocation oder Push-Benachrichtigungen
Konfigurieren Sie App-Icons und Splash-Screens für die Produktion
Vorbereiten Sie Ihre App für die Einreichung bei App Store und Google Play

Ein neues Projekt starten? Überprüfen Sie Erstellung einer mobilen App mit Next.js von Grund auf für eine geführte Anleitung.

Ressourcen

Erfinden Sie heraus, wie Capgo Ihnen helfen kann, bessere Apps schneller zu bauen, sich für ein kostenloses Konto anmelden heute.

Fahren Sie mit der Umwandlung Ihrer Next.js-App in iOS- und Android-Apps mit Capacitor 8 fort

Wenn Sie native Plugins verwenden möchten, um Ihre App zu planen, verbinden Sie es mit Fahren Sie mit der Umwandlung Ihrer Next.js-App in iOS- und Android-Apps mit Capacitor 8 fort um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo-Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise-Plugin-Alternativen für den Produktworkflow in Ionic Enterprise-Plugin-Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds

Ihr Next.js-App auf iOS &amp; Android umwandeln mit Capacitor 8