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

Einführung

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 verbesserten Leistungen und neuen Funktionen.

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

Was Sie lernen werden:

Konfigurieren Sie Ihre bestehende Next.js-Anwendung für statische Exportierung
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 an der Erstellung eines neuen Projekts von vorneherein interessiert? Überprüfen Sie unsere Anleitung auf Ein Next.js-Mobilanwendung von Grund auf aufbauen.

Vorteile der Verwendung von Next.js und Capacitor

Code-Reusabilität: Next.js ermöglicht Ihnen, wiederholbar 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.
Nativfunktionen: Capacitor bietet Zugriff auf native Gerätefeatures wie Kamera, Geolocation und mehr, um feature-reiche Mobilanwendungen zu erstellen.
Einfachere Entwicklung: Mit Capacitor können Sie Ihre Mobilanwendung mit bekannten Webtechnologien entwickeln und testen, 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)

Ihre Next.js Anwendung für Mobile konfigurieren

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 } vermeidet 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 mobilespezifische 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 Folgendes ausführen:

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 einbündeln wird.

Hinzufügen von Capacitor 8 zu Ihrem Projekt

To packen Sie Ihre Next.js-App in einen nativen mobilen Container, 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: Verwalten Sie Ereignisse im Lebenszyklus der App (Vordergrund/Hintergrund, URLs)
@capacitor/keyboard: Kontrollieren Sie das Verhalten der Tastatur auf mobilen Geräten
@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 deinem App-ID (umgekehrte Domänennotation).

Erstelle oder aktualisiere das capacitor.config.ts -File 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 Studio. Für iOS benötigen Sie einen Mac mit Xcode.

Build und synchronisiere dein Projekt:

bun run mobile

Dies führt deine benutzerdefinierte Skript aus, das das Next.js-Projekt erstellt und die statischen Dateien mit den nativen Plattformen synchronisiert.

Erstellung und Bereitstellung von nativen Apps

Um deine native mobile App zu erstellen und zu verteilen, folge 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.

Öffne die native Projekte:

For iOS:

bun run mobile:ios

Für iOS:

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, bis es bereit ist, 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, führt Xcode den Benutzer durch den Prozess (wobei man sich im Apple Developer Programm angemeldet haben muss). Sobald man eingestellt 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 den folgenden Befehl im Terminal:
```
ipconfig getifaddr en0
```
Auf Windows ausführen:
```
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 gesamte Projekt zu aktualisieren.

Rebuild and laufen Sie die App auf Ihrem Gerät mit Android Studio oder Xcode.

Jetzt, wenn Sie Änderungen an Ihrer Next.js App vornehmen, wird die mobile App automatisch neu geladen, um diese Änderungen widerzuspiegeln.

Hinweis: Wenn Sie neue Plugins installieren oder Änderungen an native Dateien vornehmen, müssen Sie das native Projekt neu erstellen, da die lebendige Wiedergabe 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:

Installieren Sie das Teilen-Plugin:

bun add @capacitor/share

Aktualisieren Sie das pages/index.js Datei, 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>
  );
}

Synchronisieren Sie die Änderungen mit dem native Projekt:

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 Wiederaufbau:

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-Dialogfeld, wodurch du das Inhalt mit anderen Apps teilen kannst.

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

Konsta UI v5 mit Tailwind CSS 4 hinzufügen

Ich habe Jahre mit Capacitor gearbeite, um awesome cross platform applications zu bauen und es war eines der besten Wahl für Jahre. Aber jetzt empfehle ich es nicht mehr, es ist sehr hackig, um es mit Next.js zu integrieren und es ist nicht wirklich wertvoll, 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 Stil anpasst, empfehle ich Konsta UI v5. Sie benötigen Tailwind CSS 4 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. Fahren Sie mit diesen Schritten fort, 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 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 gestyled 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 nicht benötigte 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.

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 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 Entwicklung aktiviert
Optionally hinzugefügte Konsta UI für native aussehende Komponenten

Nächste Schritte:

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

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

Ressourcen

Erhalten Sie Informationen darüber, wie Capgo Ihnen helfen kann, bessere Apps schneller zu entwickeln. Melden Sie sich für ein kostenloses Konto an heute.

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

Wenn Sie Fahren Sie mit der Umwandlung Ihres Next.js-Apps in iOS- und Android-Anwendungen 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.

Konvertieren Sie Ihre Next.js-App in iOS- &amp; Android mit Capacitor 8