Creare un'App Mobile Nativa nel 2024 con Next.js 14 e Capacitor: Una Guida Passo dopo Passo

Introduzione

In questo tutorial, esploreremo come creare app mobili native utilizzando la potente combinazione di Nextjs 14 e Capacitor nel 2024. Sfruttando le ultime versioni di queste tecnologie, puoi costruire applicazioni mobili ad alte prestazioni e ricche di funzionalità con facilità. Dimostreremo anche come migliorare l’interfaccia utente mobile utilizzando Konsta UI e Tailwind CSS, anche se questo passaggio è opzionale.

Nextjs, un popolare framework React, fornisce una solida base per la creazione di applicazioni web, mentre Capacitor ti permette di trasformare la tua app Nextjs in un’app mobile nativa senza modifiche significative o la necessità di imparare nuove competenze come React Native. Questo tutorial ti guiderà attraverso il processo, partendo dalla configurazione di una nuova app Nextjs e integrando Capacitor per creare un’esperienza mobile nativa.

Vantaggi dell’utilizzo di Nextjs e Capacitor

• Riutilizzo del codice: Nextjs ti permette di scrivere componenti riutilizzabili e condividere il codice tra le tue app web e mobile, risparmiando tempo e sforzi di sviluppo.
• Prestazioni: Nextjs offre ottimizzazioni delle prestazioni integrate, come il rendering lato server e lo split del codice, garantendo tempi di caricamento rapidi e un’esperienza utente fluida.
• Funzionalità native: Capacitor fornisce accesso alle funzionalità native del dispositivo come la fotocamera, la geolocalizzazione e altro, permettendoti di costruire app mobili ricche di funzionalità.
• Sviluppo semplificato: Con Capacitor, puoi sviluppare e testare la tua app mobile utilizzando tecnologie web familiari, riducendo la curva di apprendimento e semplificando il processo di sviluppo.

Preparazione della tua app Nextjs

Per iniziare, creiamo una nuova applicazione Nextjs utilizzando il comando create-next-app:

npx create-next-app@latest my-app

Questo comando configurerà un progetto Nextjs vuoto con la configurazione raccomandata per l’ultima versione.

Successivamente, naviga nella directory del progetto:

cd my-app

Per creare un’app mobile nativa, dobbiamo generare un’esportazione statica del nostro progetto Nextjs. Aggiorna il file package.json per includere uno script per la compilazione e l’esportazione del progetto:

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

L’esecuzione del comando npm run static potrebbe risultare in errori a causa dell’incompatibilità dell’ottimizzazione delle immagini. Per risolvere questo, apri il file next.config.js e modificalo come segue:

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

Ora, l’esecuzione di npm run static dovrebbe funzionare senza problemi, e troverai una nuova cartella out alla radice del tuo progetto. Questa cartella sarà utilizzata da Capacitor nei passaggi successivi.

Aggiunta di Capacitor alla tua app Nextjs 14

Per pacchettizzare la tua app Nextjs in un contenitore mobile nativo, segui questi passaggi:

1. Installa il Capacitor CLI come dipendenza di sviluppo:

npm install -D @capacitor/cli

2. Inizializza Capacitor nel tuo progetto Nextjs:

npx cap init

Durante il processo di inizializzazione, puoi premere “Invio” per accettare i valori predefiniti per il nome dell’app e l’ID del bundle.

3. Installa i pacchetti Capacitor richiesti:

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

4. Aggiungi le piattaforme native:

npx cap add ios
npx cap add android

Capacitor creerà cartelle per ciascuna piattaforma (ios e android) alla radice del tuo progetto. Queste cartelle contengono i progetti nativi per iOS e Android, rispettivamente.

Per accedere e compilare il progetto Android, devi avere Android Studio installato. Per lo sviluppo iOS, hai bisogno di un Mac con Xcode installato.

5. Configura Capacitor:

Apri il file capacitor.config.ts e aggiorna la proprietà webDir per puntare alla directory di output della tua build Nextjs:

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

6. Compila e sincronizza il tuo progetto:

npm run static
npx cap sync

Il comando npm run static compila il tuo progetto Nextjs ed esporta i file statici, mentre npx cap sync sincronizza il codice web con le piattaforme native.## Creazione e distribuzione di app native

Per creare e distribuire la tua app mobile nativa, segui questi passaggi: Per sviluppare app iOS, devi avere Xcode installato, e per le app Android, devi avere Android Studio installato. Inoltre, se prevedi di distribuire la tua app sullo store, devi iscriverti all’Apple Developer Program per iOS e alla Google Play Console per Android.

1. Apri i progetti nativi:

Per iOS:

npx cap open ios

Per Android:

npx cap open android

2. Compila ed esegui l’app:

• In Android Studio, attendi che il progetto sia pronto, quindi fai clic sul pulsante “Esegui” per distribuire l’app su un dispositivo connesso o un emulatore.

• In Xcode, configura il tuo account di firma per distribuire l’app su un dispositivo reale. Se non l’hai mai fatto prima, Xcode ti guiderà attraverso il processo (nota che devi essere iscritto all’Apple Developer Program). Una volta configurato, fai clic sul pulsante “Play” per eseguire l’app sul tuo dispositivo connesso.

Congratulazioni! Hai distribuito con successo la tua app web Nextjs su un dispositivo mobile.

Ricaricamento live di Capacitor

Durante lo sviluppo, puoi sfruttare il ricaricamento live per vedere i cambiamenti istantaneamente sul tuo dispositivo mobile. Per abilitare questa funzionalità, segui questi passaggi:

1. Trova il tuo indirizzo IP locale:

• Su macOS, esegui il seguente comando nel terminale:

  ipconfig getifaddr en0

• Su Windows, esegui:

  ipconfig

  Cerca l’indirizzo IPv4 nell’output.

2. Aggiorna il file capacitor.config.ts per includere la configurazione del server:

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;

Sostituisci YOUR_IP_ADDRESS con il tuo indirizzo IP locale.

3. Applica le modifiche al tuo progetto nativo:

npx cap copy

Il comando copy copia la cartella web e le modifiche di configurazione nel progetto nativo senza aggiornare l’intero progetto.

4. Ricompila ed esegui l’app sul tuo dispositivo usando Android Studio o Xcode.

Ora, ogni volta che apporti modifiche alla tua app Nextjs, l’app mobile si ricaricherà automaticamente per riflettere tali modifiche.

Nota: Se installi nuovi plugin o apporti modifiche ai file nativi, dovrai ricompilare il progetto nativo poiché il ricaricamento live si applica solo alle modifiche del codice web.

Utilizzo dei plugin Capacitor

I plugin Capacitor ti permettono di accedere alle funzionalità native del dispositivo dalla tua app Nextjs. Esploriamo come utilizzare il plugin Share come esempio:

1. Installa il plugin Share:

npm i @capacitor/share

2. Aggiorna il file pages/index.js per utilizzare il 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. Sincronizza le modifiche con il progetto nativo:

Come menzionato in precedenza, quando installiamo nuovi plugin, dobbiamo eseguire un’operazione di sincronizzazione e poi ridistribuire l’app sul nostro dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

4. Ricompila ed esegui l’app sul tuo dispositivo.

Ora, quando fai clic sul pulsante “Condividi ora!”, apparirà la finestra di dialogo nativa di condivisione, permettendoti di condividere il contenuto con altre app.

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