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

Einführung

Haben Sie eine bestehende Next.js-Webanwendung? In diesem Leitfaden lernen Sie, wie Sie sie in native iOS- und Android-Mobilanwendungen umwandeln können, indem Sie __CAPGO_KEEP_0__ 8 verwenden. Capacitor 8 — die neueste Version mit verbesserten Leistungen und neuen Funktionen.

Capacitor umhüllt Ihre Web-App in einem nativen Container, wodurch Ihnen Zugriff auf Geräte-APIs wie Kamera, Dateisystem und Push-Benachrichtigungen gewährt wird, während Ihre bestehende React-Codebasis beibehalten wird. Im Gegensatz zu React Native müssen Sie nichts umschreiben — Ihr Next.js code läuft unverändert.

Was Sie lernen werden:

Konfigurieren Sie Ihre bestehende Next.js-Anwendung für statische Export
Fügen Sie Capacitor 8 mit wesentlichen nativen Plugins hinzu
Erstellen und testen Sie auf iOS- und Android-Emulatoren
Aktivieren Sie Live-Reload für eine schnellere Entwicklung
Optional fügen Sie Konsta UI für native aussehende Komponenten hinzu

Sind Sie auf der Suche nach einem neuen Projekt von Grund auf? Überprüfen Sie unsere Anleitung zu Erstellung einer mobilen Next.js-Anwendung von Grund auf.

Vorteile der Verwendung von Next.js und Capacitor

Code-Reusability: Next.js ermöglicht es Ihnen, wiederholbar verwendbare Komponenten zu schreiben und code zwischen Ihren Web- und Mobilanwendungen 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.
Native Funktionen: Capacitor bietet Zugriff auf native Gerätefunktionen wie Kamera, Geolocation und mehr, sodass Sie feature-reiche Mobilanwendungen erstellen können.
Einfache Entwicklung: Mit Capacitor können Sie Ihre Mobilanwendung mit bekannten Web-Technologien entwickeln und testen, wodurch die Lernkurve reduziert und der Entwicklungsprozess gestreamt wird.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

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

Konfigurieren Sie Ihre Next.js-Anwendung für Mobilgeräte

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

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

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

module.exports = nextConfig;

Die output: 'export' erzählt Next.js, statische HTML-Dateien zu generieren, und images: { unoptimized: true } umgeht 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.

Hinzufügen mobilen spezifischen 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 Ausgabe, indem Sie Folgendes ausführen:

bun run build

Sie sollten ein out Ordner am Wurzelverzeichnis Ihres Projekts sehen. Dieser enthält alle statischen Dateien, die Capacitor in Ihre native App einbündeln wird.

Capacitor 8 in Ihrem Projekt hinzufügen

Um Ihre Next.js App in eine native mobile 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 benötigen werden:

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

Diese Plugins liefern wichtige Funktionen:

@capacitor/app: Verwalte Ereignisse im App-Lebenzyklus (Vordergrund/Hintergrund, URLs)
@capacitor/keyboard: Kontrolliere die Tastaturverhalten auf mobilen Geräten
@capacitor/splash-screen: Verwalte die native Splash-Screen
@capacitor/preferences: Speichere 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 durch den Namen deiner App und com.example.myapp mit Ihrer App-ID (umgekehrte Domänennotation).

Erstellen oder aktualisieren Sie 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;

Installieren Sie native Plattformen:

bun add @capacitor/ios @capacitor/android

Fügen Sie die native Plattformordner hinzu:

bunx cap add ios
bunx cap add android

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

Um das Android-Projekt zu erstellen, benötigen Sie Android Studio. Für iOS benötigen Sie einen Mac mit Xcode.

Ihr Projekt bauen und synchronisieren:

bun run mobile

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

Erstellung und Bereitstellung von nativen Apps

Um Ihre native mobile App zu erstellen und zu verteilen, 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 nativen Projekte: Für iOS: Für Android: Oder direkt mit __CAPGO_KEEP_0__ __CAPGO_KEEP_1__:

Xcode

Android Studio

bun run mobile:ios

Apple Developer Programm

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android

Die App erstellen und ausführen:

__CAPGO_KEEP_0__

In Android Studio wartet man auf das Projekt, und klickt dann auf die Schaltfläche "Ausführen", um die App auf einem verbundenen Gerät oder Emulator zu deployen.
In Xcode stellt man seine Signierungskonto ein, um die App auf einem echten Gerät zu deployen. Wenn man dies noch nicht gemacht hat, wird Xcode durch den Prozess geführt (beachten Sie, dass man sich im Apple Developer Programm angemeldet haben muss). Sobald man eingerichtet ist, klickt man auf die "Play"-Schaltfläche, 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 Live-Reloaden profitieren, um Änderungen sofort auf Ihrem mobilen Gerät zu sehen. Um diese Funktion zu aktivieren, folgen Sie diesen Schritten:

Finden Sie Ihre lokale IP-Adresse:

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

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

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 durch Ihre lokale IP-Adresse (z.B. 192.168.1.100).

Anwenden Sie die Änderungen an Ihrem native Projekt:

bunx cap copy

Die copy Befehl kopiert das Web-Ordner und die Konfigurationsänderungen in das native Projekt ohne das gesamte Projekt zu aktualisieren.

Rebuild und führen Sie die App auf Ihrem Gerät mit Android Studio oder Xcode aus.

Jetzt werden die Änderungen an Ihrer Next.js App automatisch neu geladen, um diese zu spiegeln.

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-Erweiterungen

Capacitor-Erweiterungen ermöglichen Ihnen, Zugriff auf native Gerätefunktionen von Ihrem Next.js-Anwendungsprojekt zu erhalten. Lassen Sie uns herausfinden, wie Sie die Teilen-Erweiterung als Beispiel verwenden:

Installieren Sie die Teilen-Erweiterung:

bun add @capacitor/share

Aktualisieren Sie das pages/index.js Festlegen Sie die Änderungen mit dem native Projekt synchron:

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>
  );
}

Wie bereits erwähnt, müssen wir bei der Installation neuer Erweiterungen eine Synchronisierungsoperation durchführen und das App-Programm dann auf unserem Gerät neu bereitstellen. Um dies durchzuführen, führen Sie bitte folgende Befehl aus:

Oder synchronisieren Sie ohne Wiederverwendung:

bun run mobile

Wiederverwenden und auf Ihrem Gerät ausführen Sie das App-Programm.

bunx cap sync

Jetzt, wenn Sie auf den Button „Jetzt teilen!“ klicken, erscheint das native Teilen-Dialogfeld, sodass Sie den Inhalt mit anderen Apps teilen können.

targetLanguage

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

Konsta UI v5 mit Tailwind CSS 4 hinzufügen

Ich habe Jahre mit Ionic erstaunliche Cross-Platform-Anwendungen erstellt und es war eines der besten Wahlmöglichkeiten 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 Sie bereits.

Tailwind CSS 4

haben, wenn Sie eine wirklich großartige aussehende mobile UI möchten, die sich an iOS- und Android-spezifische Stile anpasst, empfehle ich Ihnen Konsta UI v5. Sie müssen bereits Tailwind CSS 4 installiert haben, um die mobilen UI Ihres Next.js-Apps zu verbessern, können Sie, eine mobile-freundliche UI-Komponentenbibliothek, die sich an iOS- und Android-Styling anpasst.

Folge diesen Schritten, um Konsta UI v5 zu integrieren:

bun add konsta

Installieren Sie die erforderlichen Pakete (Konsta UI v5): styles/globals.css):

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

Importieren Sie das Konsta UI-Thema in Ihrer Haupt-CSS-Datei (z.B.

Konfigurieren Sie Tailwind CSS 4 für Next.js (PostCSS): postcss.config.mjs Erstellen Sie

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

am Projektroot: styles/globals.css Tailwind v4 verwendet PostCSS direkt in Next.js. Halten Sie Ihre globalen Imports in

(bereits oben hinzugefügt). App Umgeben Sie Ihre App mit dem Konsta UI v5 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;

Komponenten in

Beispiel-Seite

Aktualisieren Sie das pages/index.js Datei, um Komponenten von Konsta UI v5 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 Ihrer 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 natürliche, mobile Oberfläche haben, die von Konsta UI v5 und mit Tailwind CSS 4 gestyled wird.

Leistungsoptimierung

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

Kleinhalten Sie die App-Größe, indem Sie nicht benötigte Abhängigkeiten und Assets entfernen.
Optimieren Sie Bilder und andere Medien-Dateien, um die Ladezeiten zu reduzieren.
Implementieren Sie die lazy Loading für Komponenten und Seiten, um die Initialisierungsleistung zu verbessern.
Verwenden Sie serverseitige Rendering (SSR) mit Next.js, um die Ladezeit des Apps und die Suchmaschinenoptimierung (SEO) zu verbessern.
Nutzen Sie die eingebauten Optimierungen von Capacitor, wie z.B. das Caching des Web-Views und die App-Bündelung.

Zusammenfassung

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 Mobilgeräten mit Zugriff auf Geräte-APIs.

Was Sie erreicht haben:

Konfiguriert Next.js für statische Export
Hinzugefügt Capacitor 8 mit wichtigen Plugins
Erstellt und bereitgestellt auf iOS- und Android-Emulatoren
Aktiviert Live-Reload für die Entwicklung
Optional hinzugefügt Konsta UI für native aussehende Komponenten

Nächste Schritte:

Einrichten Capgo für über die Luft übertragene Updates ohne Wiederabgabe bei der App-Stores
Mehr native Plugins wie Kamera, Standort oder Push-Benachrichtigungen hinzufügen
App-Ikon und Splash-Screens für die Produktion konfigurieren
Ihre App auf die App Store und Google Play-Submission vorbereiten

Ein neues Projekt starten? Überprüfen Sie Ein Next.js-Mobil-App von Grund auf erstellen für eine umfassende Anleitung.

Ressourcen

Erhalten Sie mit Capgo Unterstützung bei der Erstellung von besseren Apps schneller Melden Sie sich für ein kostenloses Konto an heute.

Konvertieren Sie Ihre Next.js-App in iOS- und Android-Apps mit Capacitor 8