NextJS et Capacitor

Passer un projet Next.js en application mobile avec Capacitor
Sommaire 
 
 
 Présentation 
 
 
 Prérequis 
 
 
 Préparation du projet Next.js 
 
 
 Installation et initialisation de Capacitor 
 
 
 Configuration de Capacitor 
 
 
 Script de préparation pour les API TypeScript 
 
 
 Build et synchronisation 
 
 
 Tests et génération des apps 
 
 
 Ressources 
 
 
 
 Présentation 
 
 Ce tutoriel explique comment transformer un projet Next.js en application mobile native (iOS/Android) à l’aide de Capacitor. Si votre Next.js intègre des API routes en TypeScript, Capacitor ne les supporte pas directement : vous devrez les exclure temporairement du build et les restaurer ensuite. 
 
 Prérequis 
 
 • Node.js ≥ 14 et npm ou yarn • Next.js (dernier release) • Capacitor CLI ( npm install @capacitor/cli @capacitor/core ) • Android Studio et/ou Xcode pour émuler et builder 
 
 Préparation du projet Next.js 
 
 
 
 Vérifiez que votre projet build correctement en version web : 
 npm run build && npm run start 
 
 
 Si vous avez des API routes en TypeScript sous app/api/ , notez leur emplacement : Capacitor n’intègre que du contenu statique. 
 
 
   
 Installation et initialisation de Capacitor 
 
 
 
 Installez Capacitor dans votre projet : 
 npm install @capacitor/cli @capacitor/core 
 
 
 Initialisez Capacitor (répondez aux questions) : 
 npx cap init 
 • Nom de l’app (ex. MyNextApp) • Identifiant (ex. com.mydomain.mynextapp) • Chemin de sortie web : out (le dossier généré par next export ) 
 
 
 
 Configuration de Capacitor 
 
 
 
 Dans capacitor.config.ts ou capacitor.config.json , vérifiez : 
 export default {
 appId: 'com.mydomain.mynextapp',
 appName: 'MyNextApp',
 webDir: 'out',
 bundledWebRuntime: false
}; 
 
 
 Ajoutez les plateformes souhaitées : 
 npx cap add android
npx cap add ios 
 
 
 Script de préparation pour les API TypeScript 
 
 Créez un fichier prepare-capacitor-build.sh à la racine du projet : 
 #!/bin/bash
# Script pour préparer le build pour Capacitor

echo "🚀 Préparation du build pour Capacitor..."

# Créer un dossier temporaire pour sauvegarder les API routes
echo "📁 Sauvegarde des API routes..."
mkdir -p temp_api_backup
mv app/api/* temp_api_backup/ 2>/dev/null || :

# Exécuter le build
echo "🔨 Exécution du build..."
npm run build

# Restaurer les API routes
echo "🔄 Restauration des API routes..."
mkdir -p app/api
mv temp_api_backup/* app/api/ 2>/dev/null || :
rmdir temp_api_backup

echo "✅ Build terminé! Les fichiers statiques sont dans le dossier 'out'."
echo "📱 Vous pouvez maintenant exécuter 'npx cap sync' pour synchroniser avec Capacitor." 
 Rendez-le exécutable : 
 chmod +x prepare-capacitor-build.sh 
 ———————————————————————————— 
 Build et synchronisation 
 
 
 
 Lancez le script : 
 ./prepare-capacitor-build.sh 
 
 
 Synchronisez Capacitor avec les plateformes : 
 npx cap sync 
 Cela copie le contenu de out/ dans android/ et ios/ . 
 
 
 
 Tests et génération des apps 
 
 • Android : 
 npx cap open android 
 Dans Android Studio, choisissez un émulateur ou un appareil, puis Run . 
 • iOS : 
 npx cap open ios 
 Dans Xcode, sélectionnez un simulateur ou un appareil, puis Build and Run . 
   
 Ressources 
 
 • Documentation Capacitor : https://capacitorjs.com/docs • GitHub Capacitor : https://github.com/ionic-team/capacitor • Next.js Export : https://nextjs.org/docs/advanced-features/static-html-export • Exemples et plugins : https://github.com/ionic-team/capacitor/tree/main/example