Membangun Aplikasi Mobile Native dengan Next.js 14 dan Capacitor: Panduan Langkah demi Langkah 2024

Introduction

Dans ce tutoriel, nous explorerons comment créer des applications mobiles natives en utilisant la puissante combinaison de Next.js 14 et Capacitor en 2024. En tirant parti des dernières versions de ces technologies, vous pouvez créer facilement des applications mobiles performantes et riches en fonctionnalités. Nous montrerons également comment améliorer l’interface utilisateur mobile en utilisant Konsta UI et Tailwind CSS, bien que cette étape soit facultative.

Next.js, un framework React populaire, fournit une base solide pour construire des applications web, tandis que Capacitor vous permet de transformer votre application Next.js en une application mobile native sans modifications significatives ni besoin d’apprendre de nouvelles compétences comme React Native. Ce tutoriel vous guidera à travers le processus, en commençant par la configuration d’une nouvelle application Next.js et l’intégration de Capacitor pour créer une expérience mobile native.

Avantages de l’utilisation de Next.js et Capacitor

• Réutilisation du code : Next.js vous permet d’écrire des composants réutilisables et de partager du code entre vos applications web et mobiles, économisant du temps et des efforts de développement.
• Performance : Next.js offre des optimisations de performance intégrées, comme le rendu côté serveur et le fractionnement du code, assurant des temps de chargement rapides et une expérience utilisateur fluide.
• Capacités natives : Capacitor donne accès aux fonctionnalités natives de l’appareil 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 rationalisant le processus de développement.

Préparation de votre application Next.js

Pour commencer, créons une nouvelle application Next.js en utilisant la commande create-next-app :

npx create-next-app@latest my-app

Cette commande configurera un projet Next.js vierge avec la configuration recommandée pour la dernière version.

Ensuite, naviguez vers le répertoire du projet :

cd my-app

Pour créer une application mobile native, nous devons générer une exportation statique de notre projet Next.js. Mettez à jour le fichier package.json pour inclure un script de construction et d’exportation du projet :

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

L’exécution de la commande npm run static peut générer des erreurs en raison d’une incompatibilité d’optimisation d’image. Pour résoudre ce problème, ouvrez le fichier next.config.js et modifiez-le comme suit :

/** @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;

Maintenant, l’exécution de npm run static devrait fonctionner sans problème, et vous trouverez un nouveau dossier out à la racine de votre projet. Ce dossier sera utilisé par Capacitor dans les prochaines étapes.

Ajout de Capacitor à votre application Next.js 14

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

1. Installez le Capacitor CLI comme dépendance de développement :

npm install -D @capacitor/cli

2. Initialisez Capacitor dans votre projet Next.js :

npx cap init

Pendant le processus d’initialisation, vous pouvez appuyer sur “Entrée” pour accepter les valeurs par défaut pour le nom de l’application et l’ID du bundle.

3. Installez les packages Capacitor requis :

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

4. Ajoutez les plateformes natives :

npx cap add ios
npx cap add android

Capacitor créera des dossiers pour chaque plateforme (ios et android) à la racine de votre projet. Ces dossiers contiennent les projets natifs pour iOS et Android, respectivement.

Pour accéder et construire le projet Android, vous devez avoir Android Studio installé. Pour le développement iOS, vous avez besoin d’un Mac avec Xcode installé.

5. Configurez Capacitor :

Ouvrez le fichier capacitor.config.ts et mettez à jour la propriété webDir pour pointer vers le répertoire de sortie de votre build Next.js :

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

6. Construisez et synchronisez votre projet :

npm run static
npx cap sync

La commande npm run static construit votre projet Next.js et exporte les fichiers statiques, tandis que npx cap sync synchronise le code web avec les plateformes natives.

Construction et déploiement d’applications 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 l’app store, vous devez vous inscrire au Programme Apple Developer pour iOS et à la Google Play Console pour Android.

1. Ouvrez les projets natifs :

Pour iOS :

npx cap open ios

Pour Android :

npx cap open android

2. Construisez et exécutez l’application :

• Dans Android Studio, attendez que le projet soit prêt, puis cliquez sur le bouton “Run” pour déployer l’application sur un appareil connecté ou un émulateur.

• Dans Xcode, configurez votre compte de signature pour déployer l’application sur un appareil réel. Si vous ne l’avez jamais fait auparavant, Xcode vous guidera dans le processus (notez que vous devez être inscrit au Programme Apple Developer). Une fois configuré, cliquez sur le bouton “Play” 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.

Rechargement en direct de Capacitor

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

1. Trouvez votre adresse IP locale :

• Sur macOS, exécutez la commande suivante dans le terminal :

  ipconfig getifaddr en0

• Sur Windows, exécutez :

  ipconfig

  Cherchez l’adresse IPv4 dans la sortie.

2. Mettez à jour le fichier capacitor.config.ts pour inclure la configuration du serveur :

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;

Remplacez YOUR_IP_ADDRESS par votre adresse IP locale.

3. Appliquez les changements à votre projet natif :

npx cap copy

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

4. Reconstruisez et exécutez l’application sur votre appareil en utilisant 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 changements.

Note : Si vous installez de nouveaux plugins ou apportez des modifications aux fichiers natifs, vous devrez reconstruire le projet natif car le rechargement en direct ne s’applique qu’aux changements de code web.

Utilisation des plugins Capacitor

Les plugins Capacitor vous permettent d’accéder aux fonctionnalités natives de l’appareil depuis votre application Next.js. Explorons comment utiliser le plugin Share comme exemple :

1. Installez le plugin Share :

npm i @capacitor/share

2. Mettez à jour le fichier pages/index.js pour utiliser le plugin Share :

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. Synchronisez les changements avec le projet natif :

Comme mentionné précédemment, lors de l’installation de nouveaux plugins, nous devons effectuer une opération de synchronisation puis redéployer l’application sur notre appareil. Pour ce faire, exécutez la commande suivante :

npx cap sync

4. Reconstruisez et exécutez l’application sur votre appareil.

Maintenant, lorsque vous cliquez sur le bouton “Share now!”, la boîte de dialogue de partage native apparaîtra, vous permettant de partager le contenu avec d’autres applications.

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