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

Introduction

Se hai già una applicazione web Next.js? In questo guide, imparerai a trasformarla in applicazioni 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 mentre mantiene il tuo codice React esistente. A differenza di React Native, non hai bisogno di ri scrivere nulla — il tuo Next.js code funziona come sempre.

Cosa imparerai:

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

Se cerchi di iniziare un nuovo progetto da zero? Controlla la nostra guida su Costruire un'app mobile Next.js da zero.

I benefici dell'utilizzo di Next.js e Capacitor

La riproponibilità di Code: Next.js ti consente di scrivere componenti riutilizzabili e condividere code tra le tue app web e mobile, risparmiando tempo e sforzo di sviluppo.
Performance: Next.js offre ottimizzazioni di prestazioni integrate, come la rendering del server e la code di split, garantendo tempi di caricamento veloci e un'esperienza utente liscia.
Funzionalità native: Capacitor fornisce accesso alle funzionalità native del dispositivo, 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.

Prerequisiti

: Prima di iniziare, assicurati di avere:

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

Configurazione della tua App Next.js per dispositivi mobili

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.tsaggiungi la configurazione di esportazione:

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

module.exports = nextConfig;

La output: 'export' impostazione 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: If you’re using features that require a server (API routes, server components with data fetching, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Aggiungi script specifici per dispositivi mobili al tuo 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

Devi vedere un out cartella al livello radice del tuo progetto. Questo contiene tutti i file statici che Capacitor compilerà nel tuo app nativa.

Aggiungi Capacitor 8 al tuo progetto

To pacchiare la tua app Next.js in un contenitore mobile nativo, segui questi passaggi:

Installa il core Capacitor e CLI:

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

Installa i plugin Capacitor comuni che probabilmente avrai bisogno:

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

Questi plugin forniscono funzionalità essenziali:

@capacitor/app: Gestisci gli eventi di ciclo di vita dell'app (in primo piano/ in background, URL)
@capacitor/keyboard: Controlla il comportamento della tastiera su mobile
@capacitor/splash-screen: Gestisci lo schermo di benvenuto nativo
@capacitor/preferences: Memorizza 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 del tuo app e com.example.myapp con l'ID del tuo 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 android cartelle alla radice del tuo progetto contenenti i progetti nativi.

Per costruire il progetto Android, hai bisogno di Studio di Android. Per iOS, hai bisogno di un Mac con Xcode.

Costruisci e sincronizza il tuo progetto:

bun run mobile

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

Costruzione e Distribuzione di Applicazioni Native

Per costruire e distribuire la tua app mobile nativa, segui questi passaggi: Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Studio di Android installato. Inoltre, se hai l'intenzione di distribuire la tua app sullo store delle app, hai bisogno di iscriverti al Apple Developer Program per iOS e al Google Play Console per Android.

Apre i progetti nativi:

Per iOS:

bun run mobile:ios

Per Android:

bun run mobile:android

Ora 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 l'hai fatto prima, Xcode ti guiderà attraverso il processo (nota che devi essere iscritto al programma sviluppatore Apple). Una volta configurato, clicca sul pulsante “Gioca” per eseguire l'app sul tuo dispositivo connesso.

Congratulazioni! Hai avuto successo nel distribuire 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 ricaricamento in tempo reale per vedere i cambiamenti istantaneamente sul tuo dispositivo mobile. Per abilitare 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 nella output.

Aggiorna il tuo capacitor.config.ts per 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 esempio 192.168.1.100).

Applica i cambiamenti al tuo progetto nativo:

bunx cap copy

Il 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 ricostruire il progetto nativo poiché la ricarica in tempo reale si applica solo alle modifiche web code.

Utilizzo dei Capacitor Plugins

I Capacitor plugin ti consentono 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 file per utilizzare il 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, dobbiamo eseguire un'operazione di sincronizzazione e poi ripubblicare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

bun run mobile

Ora, semplicemente sincronizza senza ricostruire:

bunx cap sync

Riavvia e esegui l'app sul tuo dispositivo.

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

Per rendere il pulsante più compatibile con i dispositivi mobili, possiamo aggiungere alcune stampe utilizzando la mia libreria di componenti UI preferita per le app web - Next.js (nessuna intenzione di scherzo).

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 raccomando più, è molto hacky integrarlo con Next.js e non è veramente valente quando hai già.

Tailwind CSS 4

se desideri una UI mobile veramente di grande effetto che si adatta allo stiling specifico di iOS e Android, ti consiglio Konsta UI v5. CSS Tailwind 4 già installato Per migliorare l'interfaccia utente mobile del tuo app Next.js, puoi utilizzare Konsta UI v5, una libreria di componenti UI adatti per iOS e Android che si adatta allo stiling di entrambi. 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 CSS Tailwind 4 per Next.js (PostCSS):

Crea postcss.config.mjs a radice del progetto:

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

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

Avvolgi il tuo app con Konsta UI v5 App componente in 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;

Esempio Pagina

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

Aggiorna il pages/index.js file per utilizzare i componenti UI Konsta 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>
  );
}

Aggiungi il font Roboto per il tema di progettazione Material (richiesto per Konsta UI v5):

In tuo pages/_document.js o file HTML principale, aggiungi:

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

Riavvia il server di sviluppo e ricostruisci l'applicazione.

La tua app Next.js dovrebbe ora avere un'interfaccia utente mobile nativa alimentata 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 migliori pratiche:

Riduci le dimensioni dell'applicazione eliminando le dipendenze e gli asset non utilizzati.
Optimizza le immagini e altri file multimediali per ridurre i tempi di caricamento.
Eseguire 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'applicazione 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'applicazione.

Conclusioni

Hai avuto successo nel convertire la tua applicazione web esistente Next.js in applicazioni native iOS e Android utilizzando Capacitor 8. Il tuo codice web ora funziona nativamente sui dispositivi mobili con accesso alle API dei dispositivi.

Cosa hai ottenuto:

Configurato Next.js per l'esportazione statica
Aggiunto Capacitor 8 con plugin essenziali
Costruito e distribuito su simulatori iOS e Android
Abilitato il caricamento live per lo sviluppo
Opzionalmente aggiungi Konsta UI per componenti che assomigliano a quelli nativi

Passaggi successivi:

Configura Capgo per aggiornamenti in rete senza la riconferma dell'app store
Aggiungi più plugin nativi come Camera, Geolocalizzazione o Notifiche Push
Configura icone dell'app e schermate di avvio per la produzione
Prepara la tua app per la sottomissione a App Store e Google Play

Iniziando un nuovo progetto? Controlla Costruisci un'app mobile Next.js da zero per una guida passo dopo passo.

Risorse

Scopri come Capgo possa aiutarti a creare app migliori in modo più veloce, iscrivi il tuo account gratuito oggi.

Continua a lavorare da Converti la tua app Next.js in iOS e Android con Capacitor 8

Se stai utilizzando Converti la tua app Next.js in iOS e Android con Capacitor 8 per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto nella directory dei plugin Capgo i plugin Capacitor di Capgo per i dettagli di implementazione in Capacitor Plugins by Capgo, Aggiungere o aggiornare i plugin per i dettagli di implementazione in Aggiungere o aggiornare i plugin Alternative per i plugin aziendali di Ionic Enterprise per il flusso di lavoro del prodotto in Alternative per i plugin aziendali di Ionic Enterprise, e Capgo costruzioni native per il flusso di lavoro del prodotto in Capgo costruzioni native.

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