2025 Native Mobile Apps mit Next.js 15 und Capacitor erstellen: Ein Schritt-für-Schritt-Leitfaden

Einführung

In diesem Tutorial werden wir erkunden, wie man native mobile Apps mithilfe der leistungsstarken Kombination aus Next.js 15 und Capacitor im Jahr 2024 erstellen kann. Durch die Nutzung der neuesten Versionen dieser Technologien können Sie leistungsstarke, funktionsreiche mobile Anwendungen problemlos entwickeln. Wir werden auch demonstrieren, wie man die mobile Benutzeroberfläche mit Konsta UI und Tailwind CSS verbessert, obwohl dieser Schritt optional ist.

Next.js, ein beliebtes React-Framework, bietet eine solide Grundlage für den Aufbau von Webanwendungen, während Capacitor es Ihnen ermöglicht, Ihre Next.js-App ohne wesentliche Änderungen oder das Erlernen neuer Fähigkeiten wie React Native in eine native mobile App zu transformieren. Dieses Tutorial wird Sie durch den Prozess führen, beginnend mit der Einrichtung einer neuen Next.js-App und der Integration von Capacitor, um ein natives mobiles Erlebnis zu schaffen.

Vorteile der Verwendung von Next.js und Capacitor

• Code-Wiederverwendbarkeit: Next.js ermöglicht es Ihnen, wiederverwendbare Komponenten zu schreiben und Code zwischen Ihren Web- und mobilen Apps zu teilen, was Zeit und Aufwand bei der Entwicklung spart.
• Leistung: Next.js bietet integrierte Leistungsoptimierungen, wie z. B. serverseitiges Rendering und Code-Splitting, um schnelle Ladezeiten und eine reibungslose Benutzererfahrung sicherzustellen.
• Native Funktionen: Capacitor bietet Zugriff auf native Gerätefunktionen wie die Kamera, Geolokalisierung und mehr, sodass Sie funktionsreiche mobile Apps entwickeln können.
• Vereinfachte Entwicklung: Mit Capacitor können Sie Ihre mobile App unter Verwendung vertrauter Webtechnologien entwickeln und testen, wodurch die Lernkurve verringert und der Entwicklungsprozess gestrafft wird.

Vorbereitung Ihrer Next.js-App

Um zu beginnen, erstellen wir eine neue Next.js-Anwendung mit dem Befehl create-next-app:

npx create-next-app@latest my-app

Dieser Befehl richtet ein leeres Next.js-Projekt mit der empfohlenen Konfiguration für die neueste Version ein.

Navigieren Sie als Nächstes in das Projektverzeichnis:

cd my-app

Um eine native mobile App zu erstellen, müssen wir einen statischen Export unseres Next.js-Projekts generieren. Aktualisieren Sie die Datei package.json, um ein Skript zum Bauen und Exportieren des Projekts einzuschließen:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "NEXT_PUBLIC_IS_MOBILE=true next build"
  }
}

Das Ausführen des Befehls npm run static kann aufgrund von Inkompatibilitäten bei der Bildoptimierung zu Fehlern führen. Um dies zu beheben, öffnen Sie die Datei next.config.js und ändern Sie sie wie folgt:

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

module.exports = nextConfig;

Jetzt sollte das Ausführen von npm run static ohne Probleme funktionieren, und Sie finden einen neuen Ordner out im Stammverzeichnis Ihres Projekts. Dieser Ordner wird von Capacitor in den nächsten Schritten verwendet.

Hinzufügen von Capacitor zu Ihrer Next.js 15-App

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

1. Installieren Sie die Capacitor CLI als Entwicklungsabhängigkeit:

npm install -D @capacitor/cli

2. Initialisieren Sie Capacitor in Ihrem Next.js-Projekt:

npx cap init

Während des Initialisierungsprozesses können Sie “Enter” drücken, um die Standardwerte für den App-Namen und die Bundle-ID zu akzeptieren.

3. Installieren Sie die benötigten Capacitor-Pakete:

npm install @capacitor/core @capacitor/ios @capacitor/android

4. Fügen Sie die nativen Plattformen hinzu:

npx cap add ios
npx cap add android

Capacitor erstellt Ordner für jede Plattform (ios und android) im Stammverzeichnis Ihres Projekts. Diese Ordner enthalten die nativen Projekte für iOS und Android.

Um auf das Android-Projekt zuzugreifen und es zu erstellen, müssen Sie Android Studio installiert haben. Für die iOS-Entwicklung benötigen Sie einen Mac mit Xcode installiert.

5. Konfigurieren Sie Capacitor:

Öffnen Sie die Datei capacitor.config.ts und aktualisieren Sie die Eigenschaft webDir, um auf das Ausgabeverzeichnis Ihres Next.js-Baus zu verweisen:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "out",
  "bundledWebRuntime": false
}

6. Bauen und synchronisieren Sie Ihr Projekt:

npm run static
npx cap sync

Der Befehl npm run static baut Ihr Next.js-Projekt und exportiert die statischen Dateien, während npx cap sync den Webcode mit den nativen Plattformen synchronisiert.

Erstellen und Bereitstellen von nativen Apps

Um Ihre native mobile App zu erstellen und bereitzustellen, folgen Sie diesen Schritten: Um iOS-Apps zu entwickeln, müssen Sie Xcode installiert haben, und für Android-Apps benötigen Sie Android Studio. Zudem, wenn Sie planen, Ihre App im App Store zu verteilen, müssen Sie sich für das Apple Developer Program für iOS und die Google Play Console für Android anmelden.

1. Öffnen Sie die nativen Projekte:

Für iOS:

npx cap open ios

Für Android:

npx cap open android

2. Bauen und starten Sie die App:

• Warten Sie in Android Studio, bis das Projekt bereit ist, und klicken Sie dann auf die Schaltfläche “Ausführen”, um die App auf einem verbundenen Gerät oder Emulator bereitzustellen.

• Richten Sie in Xcode Ihr Signing-Konto ein, um die App auf einem echten Gerät bereitzustellen. Wenn Sie dies noch nie zuvor getan haben, führt Sie Xcode durch den Prozess (beachten Sie, dass Sie für das Apple Developer Program angemeldet sein müssen). Sobald es eingerichtet ist, klicken Sie auf die Schaltfläche “Play”, um die App auf Ihrem verbundenen Gerät auszuführen.

Herzlichen Glückwunsch! Sie haben Ihre Next.js-Webanwendung erfolgreich auf einem mobilen Gerät bereitgestellt.

Capacitor Live Reload

Während der Entwicklung können Sie die Live-Neuladefunktion nutzen, um Änderungen sofort auf Ihrem mobilen Gerät zu sehen. Um diese Funktion zu aktivieren, folgen Sie diesen Schritten:

1. Finden Sie Ihre lokale IP-Adresse:

• Unter macOS führen Sie den folgenden Befehl im Terminal aus:

  ipconfig getifaddr en0

• Unter Windows führen Sie aus:

  ipconfig

  Suchen Sie die IPv4-Adresse in der Ausgabe.

2. Aktualisieren Sie die Datei capacitor.config.ts, um die Serverkonfiguration einzuschließen:

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

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

export default config;

Ersetzen Sie YOUR_IP_ADDRESS durch Ihre lokale IP-Adresse.

3. Wenden Sie die Änderungen auf Ihr natives Projekt an:

npx cap copy

Der Befehl copy kopiert den Webordner und die Konfigurationsänderungen in das native Projekt, ohne das gesamte Projekt zu aktualisieren.

4. Bauen und starten Sie die App auf Ihrem Gerät mit Android Studio oder Xcode.

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

Hinweis: Wenn Sie neue Plugins installieren oder Änderungen an nativen Dateien vornehmen, müssen Sie das native Projekt neu bauen, da das Live-Neuladen nur auf Änderungen im Webcode angewendet wird.

Verwendung von Capacitor-Plug-ins

Capacitor-Plug-ins ermöglichen den Zugriff auf native Gerätefunktionen aus Ihrer Next.js-App. Lassen Sie uns erkunden, wie man das Share-Plugin als Beispiel verwendet:

1. Installieren Sie das Share-Plugin:

npm i @capacitor/share

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

3. Synchronisieren Sie die Änderungen mit dem nativen Projekt:

Wie bereits erwähnt, müssen wir beim Installieren neuer Plugins eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Führen Sie dazu den folgenden Befehl aus:

npx cap sync

4. Bauen und starten Sie die App auf Ihrem Gerät.

Jetzt erscheint das native Freigabedialogfeld, wenn Sie auf die Schaltfläche “Jetzt teilen!” klicken, und ermöglicht es Ihnen, den Inhalt mit anderen Apps zu teilen.

npm i konsta

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

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

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

export default MyApp;

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