Allez directement au contenu principal
Capgo logo
Tutoriel

Créez une application mobile Next.js à partir de zéro avec Capacitor 8

Guide étape par étape pour créer un nouveau projet Next.js 15 et le transformer en applications mobiles natives iOS et Android à l'aide de Capacitor 8. Parfait pour démarrer frais avec un développement mobile.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu
Créez une application mobile Next.js à partir de zéro avec Capacitor 8

Introduction

Vous souhaitez créer une application mobile avec Next.js à partir de zéro ? Ce guide vous accompagne dans la création d'un nouveau projet Next.js 15 configuré pour le mobile dès le début, puis dans la mise en boîte sous forme d'applications natives iOS et Android à l'aide de Capacitor 8.

À la fin de ce tutoriel, vous disposerez d'une application mobile fonctionnelle exécutée sur des simulateurs que vous pouvez continuer à développer et publier ultérieurement sur l'App Store et Google Play.

Durée requise : ~30 minutes

Ce que vous allez construire :

  • Un nouveau projet Next.js 15 avec App Router
  • Configuration d'exportation statique pour les appareils mobiles
  • Capacitor 8 avec des plugins essentiels
  • Applications natives iOS et Android
  • Configuration de développement avec rechargement en direct

Vous avez déjà une application Next.js ? Consultez Convertissez votre application Next.js en application mobile au lieu de cela.

Prérequis

Assurez-vous d'avoir ces éléments installés :

  • Node.js 18+ (vérifiez avec node --version)
  • Bun gestionnaire de package (curl -fsSL https://bun.sh/install | bash)
  • Xcode (seulement macOS, pour le développement iOS)
  • Android Studio (pour le développement Android)

Étape 1 : Créez un nouveau projet Next.js

Commencez par créer un projet Next.js 15 frais :

bunx create-next-app@latest my-mobile-app

Lorsque vous êtes invité à choisir, sélectionnez ces options :

  • TypeScript : Oui (recommandé)
  • ESLint: Oui
  • Tailwind CSS: Oui (recommandé pour le style mobile)
  • src/ répertoire: Oui
  • App Router: Oui (recommandé)
  • Alias d'importation: Par défaut (@/*)

Accédez à votre projet: 

cd my-mobile-app

Étape 2 : Configurez Next.js pour l'exportation statique

Capacitor nécessite des fichiers HTML/JS/CSS statiques. Configurez Next.js pour l'exportation statique en mettant à jour next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  // Ensure trailing slashes for proper routing in Capacitor
  trailingSlash: true,
};

export default nextConfig;

Pourquoi ces paramètres ?

  • output: 'export' — Génère du HTML statique au lieu de nécessiter un serveur Node.js
  • images: { unoptimized: true } — Désactive l'optimisation des images Next.js (nécessite un serveur)
  • trailingSlash: true — Assure une navigation correcte dans la vue WebView native

Étape 3 : Ajoutez les scripts mobiles

Met à jour votre package.json avec des scripts de développement mobile :

{
  "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 la construction :

bun run build

Vous devriez voir un out répertoire avec vos fichiers statiques.

Étape 4 : Installez Capacitor 8

Installez les packages de noyau Capacitor :

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

Installez les plugins essentiels dont la plupart des applications mobiles ont besoin :

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

Ce que font ces plugins :

  • @capacitor/app — Événements de cycle d'applications (avant-plan/arrière-plan, liens profonds)
  • @capacitor/keyboard — Contrôle du comportement de la touche clavier
  • @capacitor/splash-screen — Contrôle de l'écran de splash natif
  • @capacitor/status-bar — Personnalisez la barre d'état du dispositif
  • @capacitor/preferences — Stockage de valeurs clés (comme localStorage mais natif)

Étape 5 : Initialiser Capacitor

Initialisez Capacitor avec vos détails de projet :

bunx cap init "My Mobile App" com.example.mymobileapp --web-dir out

Remplacez :

  • "My Mobile App" par le nom d'affichage de votre application
  • com.example.mymobileapp par l'ID de votre application (notation de domaine inversée)

Cela crée capacitor.config.ts. Mettez à jour avec la configuration du plugin :

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

const config: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'light',
    },
  },
};

export default config;

Étape 6 : Ajouter les plateformes natives

Installez les packages de plateforme :

bun add @capacitor/ios @capacitor/android

Générez les projets natifs :

bunx cap add ios
bunx cap add android

Cela crée ios And android les dossiers contenant les projets natifs.

Étape 7 : Construire et Exécuter

Construire votre projet et synchroniser avec les plateformes natives :

bun run mobile

Ouvrir dans l'émulateur iOS :

bun run mobile:ios

Ou l'émulateur Android :

bun run mobile:android

Dans Xcode (iOS) :

  1. Choisissez un simulateur dans le menu des appareils
  2. Cliquez sur le bouton Play ou appuyez sur Cmd + R

Dans Android Studio :

  1. Attendez que Gradle termine la synchronisation
  2. Choisissez un émulateur dans le menu des appareils
  3. Cliquez sur le bouton Exécuter ou appuyez sur Shift + F10

Étape 8 : Configurez la mise à jour en temps réel

Pour un développement plus rapide, activez la mise à jour en temps réel afin que les modifications apparaissent instantanément sur votre appareil.

  1. Trouvez votre adresse IP locale :
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. Créez un fichier de configuration de développement Capacitor. Ajoutez-y capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const devConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... same plugin config
  },
};

const prodConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  plugins: {
    // ... same plugin config
  },
};

const config = process.env.NODE_ENV === 'development' ? devConfig : prodConfig;

export default config;
  1. Démarrer le serveur de développement et copiez la configuration vers native :
bun run dev &
NODE_ENV=development bunx cap copy
  1. Rebâtissez dans Xcode/Android Studio

Maintenant, les modifications apportées à votre Next.js code se reflèteront en temps réel sur l'appareil.

Étape 9 : Créez votre première écran mobile

Créons une simple page d'accueil mobile-friendly. Mettez à jour src/app/page.tsx:

'use client';

import { useEffect, useState } from 'react';
import { App } from '@capacitor/app';
import { Keyboard } from '@capacitor/keyboard';

export default function Home() {
  const [appInfo, setAppInfo] = useState<{ name: string; version: string } | null>(null);

  useEffect(() => {
    // Get app info on mount
    App.getInfo().then(setAppInfo).catch(console.error);

    // Handle back button on Android
    const backHandler = App.addListener('backButton', ({ canGoBack }) => {
      if (!canGoBack) {
        App.exitApp();
      } else {
        window.history.back();
      }
    });

    // Hide keyboard when tapping outside inputs
    const keyboardHandler = Keyboard.addListener('keyboardWillShow', () => {
      document.body.classList.add('keyboard-open');
    });

    return () => {
      backHandler.then(h => h.remove());
      keyboardHandler.then(h => h.remove());
    };
  }, []);

  return (
    <main className="min-h-screen bg-linear-to-b from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6 text-white">
      <h1 className="text-4xl font-bold mb-4">My Mobile App</h1>
      <p className="text-xl mb-8 text-center opacity-90">
        Built with Next.js 15 + Capacitor 8
      </p>

      {appInfo && (
        <div className="bg-white/20 rounded-lg p-4 backdrop-blur-sm">
          <p className="text-sm">
            {appInfo.name} v{appInfo.version}
          </p>
        </div>
      )}

      <div className="mt-12 space-y-4 w-full max-w-sm">
        <button className="w-full py-4 px-6 bg-white text-blue-600 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
          Get Started
        </button>
        <button className="w-full py-4 px-6 bg-white/20 text-white rounded-xl font-semibold text-lg backdrop-blur-sm active:scale-95 transition-transform">
          Learn More
        </button>
      </div>
    </main>
  );
}

Étape 10 : Ajoutez un traitement de zone de sécurité

Les appareils mobiles comportent des notches, des indicateurs de maison et des barres de statut. Ajoutez un traitement de zone de sécurité avec Tailwind.

Mise à jour src/app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Prevent text selection on mobile */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in inputs */
input, textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Keyboard handling */
.keyboard-open {
  --sab: 0px;
}

Structure du projet

Votre projet devrait maintenant ressembler à ceci :

my-mobile-app/
├── android/              # Android native project
├── ios/                  # iOS native project
├── out/                  # Static build output
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── ...
├── capacitor.config.ts   # Capacitor configuration
├── next.config.ts        # Next.js configuration
├── package.json
└── ...

Étapes suivantes

Vous disposez maintenant d'une application mobile Next.js fonctionnelle. Voici ce que vous devez faire ensuite :

Configuration essentielle

  • Icônes de l'application : Remplacez les icônes par défaut dans ios/App/App/Assets.xcassets et android/app/src/main/res
  • Écran de démarrage : Personnalisez dans les projets natifs ou utilisez @capacitor/splash-screen config
  • Liens Profonds : Configurez les schémas d'URL pour votre application

Ajoutez Plus de Fonctionnalités

  • Caméra : bun add @capacitor/camera
  • Localisation : bun add @capacitor/geolocation
  • Notifications Push : bun add @capacitor/push-notifications
  • Système de Fichiers : bun add @capacitor/filesystem

Amélioration de l'Interface Utilisateur

Considérez l'ajout de Konsta UI pour des composants iOS/Android qui ressemblent à des composants natifs :

bun add konsta

Mises à Jour en Ligne

Configurer Capgo pour envoyer des mises à jour sans résubmission de l'application :

bunx @capgo/cli init

Dépannage

La construction échoue avec « Cannot find module » Exécuter bun install et réessayer.

iOS : « Aucune identité de signature trouvée » Ouvrez Xcode, allez à Signing & Capabilities, et sélectionnez votre équipe de développement.

Android : « SDK location not found » Créer android/local.properties avec sdk.dir=/path/to/android/sdk

Les modifications ne s'affichent pas sur le dispositif Vérifiez que vous avez exécuté bun run mobile après avoir apporté des modifications. Pour le rechargement en direct, vérifiez que l'adresse IP est correcte et que le serveur de développement est en cours d'exécution.

Ressources

Prêt à envoyer votre application ? Découvrez comment Capgo peut vous aider à livrer des mises à jour plus rapidement — s'inscrire à un compte gratuit aujourd'hui.

Continuez à partir de Construire une application mobile Next.js à partir de zéro avec Capacitor 8

Si vous utilisez Construirez une application mobile Next.js à partir de zéro avec Capacitor 8 pour planifier l'automatisation CI/CD, la connecter avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour les détails d'implémentation dans Intégration CI/CD, et GitHub Intégration d'actions pour les détails d'implémentation dans GitHub Actions Integration.

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans la voie de revue normale.

Commencez dès maintenant

Dernières actualités de notre Blog

Capgo vous donne les meilleures informations dont vous avez besoin pour créer une application mobile véritablement professionnelle.

La communication à deux voies dans les applications Capacitor
Développement, Mobile, Mises à jour
26 avril 2025

La Communication Bidirectionnelle dans les Applications Capacitor

5 Erreurs Fréquentes à Eviter lors des Mises à Jour OTA
Développement,Sécurité,Mises à Jour
13 avril 2025

5 Erreurs Fréquentes à Eviter lors des Mises à Jour OTA

5 Meilleures Pratiques de Sécurité pour les Mises à Jour en Ligne des Applications Mobiles
Développement,Mobile,Mises à Jour
14 janvier 2025

5 Meilleures Pratiques de Sécurité pour les Mises à Jour en Ligne des Applications Mobiles

Voir tout de notre blog