Converti la tua app Next.js in iOS e Android con Capacitor 8

Introduzione

Hai un'applicazione web Next.js esistente? In questo guide, imparerai a trasformarla in app mobili native per iOS e Android utilizzando Capacitor 8 — l'ultima versione con prestazioni migliorata e nuove funzionalità.

Capacitor avvolge la tua app web in un contenitore nativo, dando accesso a API di dispositivo come camera, filesystem e notifiche push, mantenendo intatta la tua base di codice React esistente. A differenza di React Native, non è necessario ri-scrittura nulla — il tuo Next.js code funziona comunque.

Cosa imparerai:

Configura la tua app Next.js esistente per l'esportazione statica
Aggiungi Capacitor 8 con plugin nativi essenziali
Costruisci e testa su simulatori iOS e Android
Abilita il caricamento in tempo reale per un sviluppo più veloce
Aggiungi optionalmente Konsta UI per componenti che assomigliano a quelli nativi

Vuoi iniziare un nuovo progetto da zero? Ecco la nostra guida su Creare un'app mobile Next.js da zero.

I benefici dell'utilizzo di Next.js e Capacitor

Code ReusabilitàLa reusabilità dei componenti: Next.js ti consente di scrivere componenti riutilizzabili e condividere code tra le tue app web e mobili, risparmiando tempo e sforzo di sviluppo.
PerformanceLe prestazioni: Next.js offre ottimizzazioni di prestazioni integrate, come il rendering server-side e code di split, assicurando tempi di caricamento veloci e un'esperienza utente fluida.
Funzionalità nativeIl Capacitor fornisce l'accesso a funzionalità native come la fotocamera, la geolocalizzazione e altro, consentendo di creare 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.

Requisiti di base

Prima di iniziare, assicurati di avere:

Node.js 18+ installato
Un'applicazione esistente Next.js 15+ Xcode
(per lo sviluppo di iOS, disponibile solo su macOS) Android Studio
(per lo sviluppo di Android) Requisiti

Configurare la tua App Next.js per il Mobile

Il primo passo è configurare la tua app Next.js per l'esportazione statica. Capacitor richiede file HTML/JS/CSS statici per poterli bundle nella app nativa.

Apri il tuo next.config.js (o next.config.ts) file e aggiungi la configurazione di esportazione:

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

module.exports = nextConfig;

Il output: 'export' parametro consente a Next.js di generare file HTML statici, e images: { unoptimized: true } salta l'ottimizzazione delle immagini di Next.js che richiede un server.

Importante: Se stai utilizzando funzionalità che richiedono un server (API percorsi, componenti server con fetching dei dati, ecc.), dovrai rifare quelle utilizzando alternative client-side o API esterne.

Aggiungi script specifici per il mobile alla tua 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"
  }
}

Testa l'esportazione statica eseguendo:

bun run build

You dovresti vedere un cartella alla radice del tuo progetto. Questa contiene tutti i file statici che __CAPGO_KEEP_0__ compilerà nel tuo app nativo. out Aggiungere Capacitor 8 al tuo progetto

Adding Capacitor 8 to Your Project

Installa __CAPGO_KEEP_0__ core e __CAPGO_KEEP_1__:

Install Capacitor core and CLI:

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

Install common Capacitor plugins you’ll likely need:

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

@__CAPGO_KEEP_0__/app

@capacitor/app@__CAPGO_KEEP_0__/keyboard
@capacitor/keyboard@__CAPGO_KEEP_0__/splash-screen
Install capacitor core and __CAPGO_KEEP_1__:: Gestisci lo schermo di benvenuto nativo
@capacitor/preferenze: Salva dati chiave-valore persistentemente

Inizializza Capacitor con i dettagli del tuo progetto:

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

Sostituisci my-app con il nome della tua app e com.example.myapp con l'ID dell'app (notazione di dominio inverso).

Crea o aggiorna il capacitor.config.ts file con la configurazione corretta:

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;

Installa le piattaforme native:

bun add @capacitor/ios @capacitor/android

Aggiungi le cartelle delle piattaforme native:

bunx cap add ios
bunx cap add android

Capacitor creerà ios e file e cartelle alla radice del tuo progetto che contengono i progetti nativi. android Per costruire il progetto Android, hai bisogno di

Android Studio . Per gli app iOS, hai bisogno di un Mac conXcode Costruisci e sincronizza il tuo progetto:.

Questo esegue il tuo script personalizzato che costruisce il progetto Next.js e sincronizza i file statici con le piattaforme native.

bun run mobile

Costruzione e distribuzione di app native

Per costruire 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 È stato installato. Inoltre, se hai l'intenzione di distribuire il tuo app sul negozio di app, hai bisogno di iscriverti al Apple Developer Program per iOS e al Google Play Console per Android.

Apri i progetti nativi:

Per iOS:

bun run mobile:ios

Per Android:

bun run mobile:android

O direttamente con Capacitor CLI:

bunx cap open ios
bunx cap open android

Costruisci e esegui l'app:

android-studio-run

In Android Studio, attendi che il progetto sia pronto, e poi clicca sul pulsante “Esegui” per distribuire l'app su un dispositivo connesso o emulatore.
In Xcode, configura il tuo account di firma per distribuire l'app su un dispositivo reale. Se non hai fatto questo prima, Xcode ti guiderà attraverso il processo (nota che hai bisogno di essere iscritto al Apple Developer Program). Una volta configurato, clicca sul pulsante “Gioca” per eseguire l'app sul tuo dispositivo connesso.

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

Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo...

Capacitor Live Reload

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

Trova l'indirizzo IP locale:

Su macOS, esegui il seguente comando nel terminale:
```
ipconfig getifaddr en0
```
Su Windows, esegui:
```
ipconfig
```
Cerca l'indirizzo IPv4 nel risultato.

Aggiorna capacitor.config.ts a puntare al tuo server di sviluppo:

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;

Sostituisci YOUR_IP_ADDRESS con l'indirizzo IP locale (ad es. 192.168.1.100).

Applica le modifiche al tuo progetto nativo:

bunx cap copy

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

Riavvia e esegui l'app sul tuo dispositivo utilizzando Android Studio o Xcode.

Ora, ogni volta che apporti modifiche al tuo app Next.js, l'app mobile si ricaricherà automaticamente per riflettere quelle modifiche.

Nota: se installi nuovi plugin o apporti modifiche a file nativi, dovrai riavviare il progetto nativo poiché la ricarica in tempo reale si applica solo alle modifiche web code.

Utilizzo dei Capacitor Plugin

Il plugin Capacitor consente di accedere alle funzionalità del dispositivo nativo dal tuo app Next.js. Esploriamo come utilizzare il plugin di condivisione come esempio:

Installa il plugin di condivisione:

bun add @capacitor/share

Aggiorna il pages/index.js il file da utilizzare per l'uso del plugin di condivisione:

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

Sincronizza le modifiche con il progetto nativo:

Come menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi riavviare l'app sul dispositivo. Per farlo, esegui il seguente comando:

bun run mobile

O sincronizza senza ricostruire:

bunx cap sync

Ricostruisci e avvia l'app sul tuo dispositivo.

Ora, quando clicchi sul pulsante "Condividi ora!", apparirà il dialogo di condivisione nativo, che ti consente di condividere il contenuto con altre app.

Per rendere il pulsante più adatto per dispositivi mobili, possiamo aggiungere alcune impostazioni di stile utilizzando la mia libreria di componenti UI preferita per le app web - Next.js (nessuna battuta intenzionale).

Aggiungi Konsta UI v5 con Tailwind CSS 4

Ho lavorato per anni con Ionic per costruire applicazioni cross-platform incredibili e è stato uno dei migliori scelte per anni. Ma ora non lo consiglio più è molto hacky da integrare con Next.js e non è veramente val la pena quando hai già Tailwind CSS 4.

Se desideri una interfaccia utente mobile di grande effetto che si adatta allo stiling specifico di iOS e Android, ti consiglio di utilizzare Konsta UI v5.

Hai bisogno di avere Tailwind CSS 4 già installato Per migliorare l'interfaccia utente mobile del tuo'app Next.js, puoi utilizzare Konsta UI v5, una libreria di componenti UI mobile adattabile allo stiling di iOS e Android. Segui questi passaggi per integrare Konsta UI v5:

Installa i pacchetti richiesti (Konsta UI v5):

bun add konsta

Importa il tema di Konsta UI nel tuo file CSS principale (ad esempio styles/globals.css):

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

Configura Tailwind CSS 4 per Next.js (PostCSS):

Crea postcss.config.mjs al livello del progetto:

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

Tailwind v4 utilizza PostCSS direttamente in Next.js. Mantieni le tue importazioni globali in styles/globals.css (aggiunto sopra).

Avvolgi la tua app con il componente Konsta UI v5 in App Pagina di esempio 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;

Ora che tutto è configurato, possiamo utilizzare i componenti React di Konsta UI v5 nelle nostre pagine Next.js.

Aggiorna il

file per utilizzare i componenti Konsta UI v5: pages/index.js Aggiungi il font Roboto per il tema Material Design (richiesto per 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>
  );
}

Nel tuo

o file HTML principale, aggiungi: pages/_document.js Riavvia il server di sviluppo e ricostruisci l'app.

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

Inserisci il seguente codice nel tuo file

La tua app Next.js dovrebbe ora avere un'interfaccia utente mobile che assomiglia a quella nativa, potenziata da Konsta UI v5 e stilizzata con Tailwind CSS 4.

Optimizzazione delle Prestazioni

Per garantire prestazioni ottimali della tua app Next.js e Capacitor, considera le seguenti best practice:

Minimizza la dimensione dell'app rimuovendo le dipendenze e gli asset non utilizzati.
Optimizza le immagini e altri file multimediali per ridurre i tempi di caricamento.
Implementa il caricamento lazy per i componenti e le pagine per migliorare le prestazioni di caricamento iniziale.
Utilizza la rendering server-side (SSR) con Next.js per migliorare la velocità di caricamento dell'app e l'ottimizzazione per i motori di ricerca (SEO).
Sfrutta le ottimizzazioni integrate di Capacitor, come il caching della vista web e la confezione dell'app.

Conclusioni

Hai avuto successo nel convertire la tua app web Next.js esistente in app native per iOS e Android utilizzando Capacitor 8. Il tuo codice web ora funziona nativamente sui dispositivi mobili con accesso agli API del dispositivo.

Cosa hai ottenuto:

Configurato Next.js per l'esportazione statica
Aggiunto Capacitor 8 con plugin essenziali
Costruito e distribuito su simulator iOS e Android
Abilitato il reload in tempo reale per lo sviluppo
Aggiunto optionalmente Konsta UI per componenti che assomigliano a quelli nativi

Passaggi successivi:

Configura Capgo per aggiornamenti in tempo reale senza la riconvalidazione dell'app store
Aggiungi plugin nativi aggiuntivi come Camera, Geolocalizzazione o Notifiche Push
Configura icone dell'app e schermate di avvio per la produzione
Prepara la tua app per la sottoscrizione di App Store e Google Play

Stai iniziando un nuovo progetto? Ecco cosa fare Costruisci un'app mobile Next.js da zero per una guida passo dopo passo.

Risorse

Scopri come Capgo possa aiutarti a costruire app migliori in modo più veloce, iscriviti gratuitamente oggi.

Converti la tua applicazione Next.js in iOS &amp; Android con Capacitor 8