Convertissez votre application Next.js en iOS & Android avec Capacitor 8

Introduction

Avez-vous une application web Next.js existante ? Dans ce guide, vous apprendrez à la transformer en applications mobiles natives iOS et Android en utilisant Capacitor 8 — la dernière version avec une performance améliorée et de nouvelles fonctionnalités.

Capacitor enveloppe votre application web dans un conteneur natif, vous donnant accès aux API de l'appareil comme la caméra, le système de fichiers et les notifications push tout en conservant votre codebase React existant. Contrairement à React Native, vous n'avez pas besoin de réécrire quoi que ce soit — votre Next.js code fonctionne tel quel.

Ce que vous allez apprendre :

Configurez votre application Next.js existante pour l'exportation statique
Ajoutez Capacitor 8 avec les plugins natifs essentiels
Construisez et testez sur les simulateurs iOS et Android
Activez la reprise en direct pour un développement plus rapide
Optionnellement ajoutez Konsta UI pour des composants à l'apparence native

Vous cherchez à démarrer un nouveau projet à partir de zéro ? Consultez notre guide sur Créer une application mobile Next.js à partir de zéro.

Avantages de l'utilisation de Next.js et Capacitor

La réutilisabilité de Code : Next.js vous permet d'écrire des composants réutilisables et de partager code entre vos applications web et mobiles, en économisant du temps et de l'effort de développement.
Performances : Next.js propose des optimisations de performances intégrées, telles que le rendu côté serveur et code de segmentation, garantissant des temps de chargement rapides et une expérience utilisateur fluide.
Capacités natives : Capacitor vous donne accès aux fonctionnalités de dispositif natif comme la caméra, la géolocalisation, et plus encore, vous permettant de créer des applications mobiles riches en fonctionnalités.
Développement simplifié : Avec Capacitor, vous pouvez développer et tester votre application mobile en utilisant des technologies web familières, réduisant la courbe d'apprentissage et simplifiant le processus de développement.

Prérequis

Avant de commencer, assurez-vous d'avoir :

Node.js 18+ installé
Un projet existant Next.js 15+ application
Xcode (pour le développement iOS, macOS uniquement)
Android Studio (pour le développement Android)

Configurer votre application Next.js pour les appareils mobiles

La première étape consiste à configurer votre application Next.js pour l'exportation statique. Capacitor nécessite des fichiers HTML/JS/CSS statiques pour les assembler dans l'application native.

Ouvrez votre next.config.js (ou next.config.ts) fichier et ajoutez la configuration d'exportation :

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

module.exports = nextConfig;

La output: 'export' configuration indique à Next.js de générer des fichiers HTML statiques, et images: { unoptimized: true } s'accommode de l'optimisation des images Next.js qui nécessite un serveur.

Important : Si vous utilisez des fonctionnalités qui nécessitent un serveur (API routes, composants de serveur avec récupération de données, etc.), vous devrez refacturer celles-ci pour utiliser des alternatives côté client ou des API externes.

Ajoutez des scripts spécifiques au mobile à votre 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"
  }
}

Testez l'exportation statique en exécutant :

bun run build

Vous devriez voir un out dossier au niveau de votre projet. Cela contient tous les fichiers statiques que Capacitor bundlera dans votre application native.

Ajout de Capacitor 8 à votre projet

Pour emballer votre application Next.js dans un conteneur mobile natif, suivez ces étapes :

Installez le noyau Capacitor et CLI :

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

Installez les plugins Capacitor courants que vous aurez probablement besoin :

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

Ces plugins fournissent des fonctionnalités essentielles :

@capacitor/application: Gérer les événements de cycle de vie de l'application (avant-plan/arrière-plan, URLs)
@capacitor/clavier: Contrôler le comportement du clavier sur mobile
@capacitor/écran d'accueil: Gérer l'écran d'accueil natif
@capacitor/préférences: Stocker des données clé-valeur de manière persistante

Initialisez Capacitor avec vos détails de projet :

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

Remplacez my-app par le nom de votre application et com.example.myapp par l'ID de votre application (notation de domaine inversé).

Créez ou mettez à jour le capacitor.config.ts fichier avec la configuration appropriée :

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;

Installez les plateformes natives :

bun add @capacitor/ios @capacitor/android

Ajoutez les dossiers de plateformes natives :

bunx cap add ios
bunx cap add android

Capacitor créera et ios dossiers au niveau de votre projet racine contenant les projets natifs. android Pour construire le projet Android, vous avez besoin

d'une configuration Java Development Kit (JDK) 8 ou ultérieure. Android Studio Pour iOS, vous avez besoin d'un Mac avec Xcode.

Construire et synchroniser votre projet :

bun run mobile

Cela exécute votre script personnalisé qui construit le projet Next.js et synchronise les fichiers statiques avec les plateformes natives.

Construire et Déployer des Applications Mobiles Natives

Pour construire et déployer votre application mobile native, suivez ces étapes : Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez de distribuer votre application sur le magasin d'applications, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.

Ouvrez les projets natifs :

Pour iOS:

bun run mobile:ios

Pour Android:

bun run mobile:android

Ou directement avec Capacitor CLI:

bunx cap open ios
bunx cap open android

Construire et exécuter l'application:

android-studio-run

Dans Android Studio, attendez que le projet soit prêt, puis cliquez sur le bouton « Exécuter » pour déployer l'application sur un appareil connecté ou émulateur.
Dans Xcode, configurez votre compte de signature pour déployer l'application sur un appareil réel. Si vous n'avez pas déjà fait cela, Xcode vous guidera tout au long du processus (notez que vous devez être inscrit dans le programme Apple Developer). Une fois configuré, cliquez sur le bouton « Jouer » pour exécuter l'application sur votre appareil connecté.

Félicitations ! Vous avez réussi à déployer votre application web Next.js sur un appareil mobile.

Mais attendez, il existe également un moyen plus rapide de procéder pendant le développement...

Capacitor Live Reload

Pendant le développement, vous pouvez profiter de la rechargement en direct pour voir les changements instantanément sur votre appareil mobile. Pour activer cette fonctionnalité, suivez ces étapes :

Trouvez votre adresse IP locale :

Sur macOS, exécutez la commande suivante dans le terminal :
```
ipconfig getifaddr en0
```
Sur Windows, exécutez :
```
ipconfig
```
Recherchez l'adresse IPv4 dans la sortie.

Mettez à jour votre capacitor.config.ts pour pointer vers votre serveur de développement :

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;

Remplacez YOUR_IP_ADDRESS par votre adresse IP locale (par exemple, 192.168.1.100).

Appliquez les modifications à votre projet natif :

bunx cap copy

La commande copy copie le dossier web et les modifications de configuration vers le projet natif sans mettre à jour l'ensemble du projet.

Reconstruire et exécuter l'application sur votre appareil à l'aide d'Android Studio ou Xcode.

Maintenant, chaque fois que vous apportez des modifications à votre application Next.js, l'application mobile se rechargera automatiquement pour refléter ces modifications.

Remarque : Si vous installez de nouveaux plugins ou apportez des modifications aux fichiers natifs, vous devrez reconstruire le projet natif car la rechargement en temps réel ne s'applique qu'aux modifications web code.

Utilisation des Capacitor Plugins

Les Capacitor plugins vous permettent d'accéder aux fonctionnalités du dispositif natif depuis votre application Next.js. Explorons comment les utiliser, notamment l'exemple du plugin de partage. Le plugin de partage Installez le plugin de partage :

Mettez à jour le fichier pour utiliser le plugin de partage :

bun add @capacitor/share

Synchronisez les modifications avec le projet natif : pages/index.js Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour ce faire, exécutez la commande suivante :

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

exécutez la commande suivante :

exécutez la commande suivante :

bun run mobile

Ou juste synchroniser sans reconstruire :

bunx cap sync

Reconstruire et exécuter l'application sur votre appareil.

Maintenant, lorsque vous cliquez sur le bouton « Partager maintenant ! », le dialogue de partage natif apparaitra, vous permettant de partager le contenu avec d'autres applications.

Pour rendre le bouton plus mobile-friendly, nous pouvons ajouter quelques styles en utilisant ma bibliothèque de composants UI préférée pour les applications web - Next.js (aucune plaisanterie n'est prévue).

Ajouter Konsta UI v5 avec Tailwind CSS 4

J'ai travaillé des années avec Ionic pour construire des applications plateforme croisée incroyables et c'était l'une des meilleures options pendant des années. Mais maintenant, je ne le recommande plus car il est très hacky d'intégrer Next.js et ce n'est pas vraiment la peine lorsque vous avez déjà Tailwind CSS 4.

si vous voulez une interface utilisateur mobile vraiment agréable qui s'adapte à la stylisation spécifique d'iOS et d'Android, je recommande Konsta UI v5.

Vous devez avoir Tailwind CSS 4 déjà installé Pour améliorer l'interface utilisateur mobile de votre application Next.js, vous pouvez utiliser Konsta UI v5, une bibliothèque de composants UI mobiles amicaux qui s'adapte à la conception iOS et Android. Suivez ces étapes pour intégrer Konsta UI v5 :

Installez les packages requis (Konsta UI v5) :

bun add konsta

Importez le thème Konsta UI dans votre fichier CSS principal (par exemple, styles/globals.css):

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

Configurez Tailwind CSS 4 pour Next.js (PostCSS) :

Créez postcss.config.mjs à la racine du projet :

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

Tailwind v4 utilise directement PostCSS dans Next.js. Gardez vos imports globaux dans styles/globals.css (ajouté ci-dessus).

Enveloppez votre application avec Konsta UI v5 App composant dans 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;

Page d'exemple

Maintenant que tout est configuré, nous pouvons utiliser les composants Konsta UI v5 React dans nos pages Next.js.

Mettre à jour le pages/index.js fichier pour utiliser les composants Konsta UI v5 :

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

Ajouter la police Roboto pour le thème de conception matérielle (nécessaire pour Konsta UI v5) :

Dans votre pages/_document.js ou fichier HTML principal, ajoutez :

<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"
/>

Redémarrer le serveur de développement et reconstruirez l'application.

Votre application Next.js devrait maintenant avoir une interface utilisateur mobile native, alimentée par Konsta UI v5 et stylisée avec Tailwind CSS 4.

Optimisation de la performance

Pour garantir une performance optimale de votre application Next.js et Capacitor, considérez les meilleures pratiques suivantes :

Réduisez la taille de l'application en supprimant les dépendances et les ressources non utilisées.
Optimisez les images et les autres fichiers multimédias pour réduire les temps de chargement.
Mettez en œuvre le chargement différé pour les composants et les pages pour améliorer les performances de chargement initiales.
Utilisez le rendu côté serveur (SSR) avec Next.js pour améliorer la vitesse de chargement de l'application et l'optimisation pour les moteurs de recherche (SEO).
Profitez des optimisations intégrées de Capacitor, telles que le cache de la vue web et le paquetage de l'application.

Conclusion

Vous avez réussi à convertir votre application web Next.js existante en applications natives iOS et Android à l'aide de Capacitor 8. Votre codebase web fonctionne maintenant nativement sur les appareils mobiles avec accès aux API de l'appareil.

Ce que vous avez accompli :

Configuré Next.js pour l'export statique
Added Capacitor 8 avec les plugins essentiels
Construit et déployé vers les simulateurs iOS et Android
Activé le rechargement en direct pour le développement
Optionnellement ajouté Konsta UI pour des composants ressemblant à des composants natifs

Étapes suivantes :

Configurer Capgo pour les mises à jour hors ligne sans résubmission de l'application sur l'app store
Ajouter plus de plugins natifs comme la Caméra, la géolocalisation ou les notifications Push
Configurer les icônes de l'application et les écrans de démarrage pour la production
Préparer votre application pour la soumission sur l'App Store et Google Play

En créant un nouveau projet ? Consultez Construire une application mobile Next.js à partir de zéro pour une prise en main guidée.

Ressources

Apprenez comment Capgo peut vous aider à créer des applications meilleures et plus rapides, inscrivez-vous à un compte gratuit aujourd'hui.

Continuez à partir de Convertir votre application Next.js en iOS et Android avec Capacitor 8

Si vous utilisez Convertir votre application Next.js en iOS et Android avec Capacitor 8 à planifier le travail de plugin natif, connectez-le avec Répertoire de plugins Capgo pour le flux de travail du produit dans le répertoire de plugin Capgo les plugins Capacitor par Capgo pour le détail d'implémentation dans les plugins Capacitor par Capgo, Ajout ou mise à jour de plugins pour le détail d'implémentation dans Ajout ou mise à jour de plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs.

Convertissez votre application Next.js en iOS &amp; Android avec Capacitor 8