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

Introduzione

Hai già un'applicazione web Next.js? 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 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 è.

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

Desideri iniziare un nuovo progetto da zero? Consulta la nostra guida Costruire un'app mobile Next.js da zero.

I vantaggi dell'utilizzo di Next.js e Capacitor

La riutilizzabilità di CodeLa riutilizzabilità di Next.js ti consente di scrivere componenti riutilizzabili e condividere code tra le tue app web e mobili, risparmiando tempo e sforzo di sviluppo.
PerformanceNext.js offre ottimizzazioni di prestazioni integrate, come la rendering server-side e la code di split, garantendo tempi di caricamento veloci e un'esperienza utente liscia.
Funzionalità nativeCapacitor fornisce accesso alle funzionalità native del dispositivo, come la fotocamera, la geolocalizzazione e altro, consentendo di creare app mobili ricche di funzionalità.
Sviluppo semplificatoCon 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 preliminari

Prima di iniziare, assicurati di avere:

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

Configurazione dell'app Next.js per dispositivi mobili

Il primo passo è configurare l'app Next.js per l'esportazione statica. Capacitor richiede file HTML/JS/CSS statici per poterli bundle nel'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' 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: Se stai utilizzando funzionalità che richiedono un server (API percorsi, componenti server con fetching dei dati, ecc.), dovrai rifare quelle per utilizzare alternative client-side o API esterne.

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

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

Aggiungere Capacitor 8 al tuo Progetto

Per creare un contenitore mobile nativo per il tuo'app Next.js, segui questi passaggi:

Installa il core di 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/secondo piano, 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

Inizia 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 Studio di AndroidPer iOS, hai bisogno di un Mac con Xcode.

Costruisci e sincronizza il tuo progetto:

bun run mobile

Esegue il tuo 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, devi avere Xcode installato, e per app Android, devi avere Studio di Android

installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, devi iscriverti al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

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 o emulatore collegato.
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 collegato.

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 riavvio in tempo reale per vedere i cambiamenti istantaneamente sul tuo dispositivo mobile. Per abilitare questa funzionalità, segui questi passaggi:

Cerca l'indirizzo IP locale:

Sui sistemi macOS, esegui il seguente comando nel terminale:
```
ipconfig getifaddr en0
```
Sui sistemi Windows, esegui:
```
ipconfig
```
Cerca l'indirizzo IPv4 nella output.

Aggiorna il tuo 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 esempio, 192.168.1.100).

Applica i cambiamenti al tuo progetto nativo:

bunx cap copy

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

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

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

Nota: se installi nuovi plugin o apporti modifiche a file nativi, avrai bisogno di 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 dall'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, è necessario eseguire un'operazione di sincronizzazione e poi ripubblicare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

bun run mobile

Ora puoi sincronizzare senza ricostruire:

bunx cap sync

Ricostruisci e esegui l'app sul tuo dispositivo.

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

Per rendere il pulsante più mobile-friendly, 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 Capacitor 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 vuoi una UI mobile veramente bella che si adatti allo stiling specifico di iOS e Android consiglio di usare Konsta UI v5.

Hai bisogno di 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 (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;

Pagina di esempio

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 Material Design (richiesto per Konsta UI v5):

Nel 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 applicazione 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 per la tua applicazione Next.js e Capacitor, considera le seguenti pratiche di ottimizzazione:

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.
Esegui 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 app native per 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
Aggiungi optionalmente Konsta UI per componenti che assomigliano a quelli nativi

Passaggi successivi:

Configura Capgo per aggiornamenti in rete senza la riconvalidazione 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 sottoscrizione all'App Store e Google Play

Stai iniziando un nuovo progetto? Consulta 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 iscrivi un account gratuito oggi.

Continua 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 cartella di plugin Capgo i plugin Capacitor di Capgo per il dettaglio di implementazione in i plugin Capacitor di Capgo, Aggiungere o aggiornare i plugin per il dettaglio di implementazione in Aggiungere o aggiornare i plugin, Alternative plugin aziendali di Ionic Enterprise per il flusso di lavoro del prodotto in Alternative plugin aziendali di Ionic Enterprise, e Costruzioni native Capgo per il flusso di lavoro del prodotto in Costruzioni native Capgo

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