Convierta su aplicación Next.js a iOS y Android con Capacitor 8

Introducción

Tiene una aplicación web de Next.js existente? En esta guía, aprenderá a transformarla en aplicaciones móviles nativas de iOS y Android utilizando Capacitor 8 — la última versión con mejor rendimiento y nuevas características.

Capacitor envuelve tu aplicación web en un contenedor nativo, te da acceso a APIs de dispositivo como cámara, sistema de archivos y notificaciones push mientras mantiene tu código de React existente. A diferencia de React Native, no necesitas reescribir nada — tu Next.js code se ejecuta tal cual.

Lo que aprenderás:

Configura tu aplicación Next.js existente para exportación estática
Agrega Capacitor 8 con plugins nativos esenciales
Construye y prueba en simuladores de iOS y Android
Activa la recarga en vivo para un desarrollo más rápido
Opcionalmente agrega Konsta UI para componentes que se ven nativos

¿Quieres empezar un proyecto desde cero? Consulta nuestra guía sobre Crear una aplicación móvil de Next.js desde cero.

Ventajas de usar Next.js y Capacitor

La reutilización de Code: Next.js te permite escribir componentes reutilizables y compartir code entre tus aplicaciones web y móviles, ahorrando tiempo y esfuerzo de desarrollo.
Rendimiento: Next.js ofrece optimizaciones de rendimiento integradas, como renderizado en servidor y code división, garantizando tiempos de carga rápidos y una experiencia de usuario suave.
Capacidades Nativas: Capacitor proporciona acceso a características de dispositivo nativas como la cámara, la geolocalización y más, permitiéndote crear aplicaciones móviles ricas en características.
Desarrollo Simplificado: Con Capacitor, puedes desarrollar y probar tu aplicación móvil utilizando tecnologías web familiares, reduciendo la curva de aprendizaje y simplificando el proceso de desarrollo.

Requisitos Previos

Antes de comenzar, asegúrate de tener:

Node.js 18+ instalado
Una aplicación Next.js existente 15+ installed aplicación
Xcode (solo para desarrollo de iOS y macOS)
Android Studio (solo para desarrollo de Android)

Configuración de su aplicación Next.js para dispositivos móviles

El primer paso es configurar su aplicación Next.js para exportación estática. Capacitor necesita archivos HTML/JS/CSS estáticos para empaquetar en la aplicación nativa.

Abra su next.config.js (o next.config.ts) y agregue la configuración de exportación:

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

module.exports = nextConfig;

La output: 'export' configuración le dice a Next.js que genere archivos HTML estáticos, y images: { unoptimized: true } evita la optimización de imágenes de Next.js que requiere un servidor.

Importante: Si está utilizando características que requieren un servidor (rutas API, componentes de servidor con recuperación de datos, etc.), necesitará refactorizar esas características para utilizar alternativas de lado del cliente o APIs externas.

Agregar scripts específicos de móvil a su 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"
  }
}

Pruebe la exportación estática ejecutando:

bun run build

Debería ver un out carpeta en la raíz de su proyecto. Esto contiene todos los archivos estáticos que Capacitor empaquetará en su aplicación nativa.

Agregar Capacitor 8 a Su Proyecto

Para empaquetar su aplicación Next.js en un contenedor móvil nativo, siga estos pasos:

Instale Capacitor core y CLI:

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

Instale plugins Capacitor comunes que probablemente necesitará:

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

Estos plugins proporcionan características esenciales:

@capacitor/app: Maneja eventos de ciclo de vida de la aplicación (anterior/plano, URLs)
@capacitor/keyboard: Controla el comportamiento del teclado en dispositivos móviles
@capacitor/splash-screen: Administra la pantalla de bienvenida nativa
@capacitor/preferences: Almacena datos clave-valor de manera persistente

Inicia Capacitor con detalles de tu proyecto:

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

Sustituye my-app por el nombre de tu aplicación y com.example.myapp por el ID de tu aplicación (notación de dominio inverso)

Crear o actualizar el capacitor.config.ts archivo con la configuración adecuada:

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;

Instalar plataformas nativas:

bun add @capacitor/ios @capacitor/android

Agregar carpetas de plataforma nativa:

bunx cap add ios
bunx cap add android

Capacitor creará y ios carpetas en la raíz de tu proyecto que contienen los proyectos nativos. android Para construir el proyecto de Android, necesitas

Android Studio . Para iOS, necesitas un Mac conXcode Compilar y sincronizar tu proyecto:.

Usa un Mac con Xcode para iOS

bun run mobile

Ejecuta tu script personalizado que construye el proyecto de Next.js y sincroniza los archivos estáticos con las plataformas nativas.

Construyendo y Desplegando Aplicaciones Nativas

Para construir y desplegar tu aplicación móvil nativa, sigue estos pasos: Para desarrollar aplicaciones iOS, necesitas tener instalado Xcode y para aplicaciones Android, necesitas tener instalado Android Studio Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, necesitas inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Abre los proyectos nativos:

Para iOS:

bun run mobile:ios

Para Android:

bun run mobile:android

O directamente con Capacitor CLI:

bunx cap open ios
bunx cap open android

Construye y ejecuta la aplicación:

android-studio-run

En Android Studio, espere a que el proyecto esté listo y luego haga clic en el botón “Ejecutar” para desplegar la aplicación en un dispositivo conectado o emulador.
En Xcode, configure su cuenta de firma para desplegar la aplicación en un dispositivo real. Si no lo ha hecho antes, Xcode le guiará a través del proceso (tenga en cuenta que necesita estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haga clic en el botón “Reproducir” para ejecutar la aplicación en su dispositivo conectado.

¡Felicidades! Ha desplegado con éxito su aplicación web de Next.js en un dispositivo móvil.

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo...

Capacitor Live Reload

Durante el desarrollo, puede aprovechar el recarga en vivo para ver los cambios instantáneamente en su dispositivo móvil. Para habilitar esta característica, siga estos pasos:

Encuentre su dirección IP local:

En macOS, ejecute el siguiente comando en la terminal:
```
ipconfig getifaddr en0
```
En Windows, ejecute:
```
ipconfig
```
Busque la dirección IPv4 en la salida.

Actualice su capacitor.config.ts para que apunte a su servidor de desarrollo:

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;

Sustituya YOUR_IP_ADDRESS por su dirección IP local (por ejemplo, 192.168.1.100).

Aplicar los cambios a su proyecto nativo:

bunx cap copy

El comando copy copia el directorio web y los cambios de configuración al proyecto nativo sin actualizar todo el proyecto.

Reconstruya y ejecute la aplicación en su dispositivo utilizando Android Studio o Xcode.

A partir de ahora, cada vez que realice cambios en su aplicación Next.js, la aplicación móvil se recargará automáticamente para reflejar esos cambios.

Nota: Si instala nuevos plugins o realiza cambios en archivos nativos, deberá reconstruir el proyecto nativo ya que la recarga en vivo solo se aplica a cambios web code.

Usando Capacitor Plugins

Capacitor plugins te permiten acceder a características de dispositivo nativas desde tu aplicación Next.js. Expliquemos cómo utilizar el plugin de Compartir como ejemplo:

Instala el plugin de Compartir:

bun add @capacitor/share

Actualiza el pages/index.js archivo para utilizar el plugin de Compartir:

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

Sincroniza los cambios con el proyecto nativo:

Como se mencionó anteriormente, cuando instalas nuevos plugins, debes realizar una operación de sincronización y luego volver a desplegar la aplicación en tu dispositivo. Para hacer esto, ejecuta el siguiente comando:

bun run mobile

O simplemente sincroniza sin reconstruir:

bunx cap sync

Reconstruye y ejecuta la aplicación en tu dispositivo.

Ahora, cuando hagas clic en el botón "Compartir ahora!", se mostrará el diálogo de compartir nativo, permitiéndote compartir el contenido con otras aplicaciones.

Para hacer que el botón tenga un aspecto más móvil, podemos agregar algunos estilos utilizando mi biblioteca de componentes de interfaz de usuario favorita para aplicaciones web - Next.js (sin intención de broma).

Agregar Konsta UI v5 con Tailwind CSS 4

He trabajado años con Ionic para construir aplicaciones de plataforma cruzada impresionantes y fue una de las mejores opciones durante años. Pero ahora ya no lo recomiendo, es muy engorroso integrarlo con Next.js y no vale la pena cuando ya tienes Tailwind CSS 4.

si quieres una interfaz de usuario móvil realmente impresionante que se adapte a la estilización específica de iOS y Android, te recomiendo Konsta UI v5.

Necesitas tener Tailwind CSS 4 instalado ya Para mejorar la interfaz de usuario móvil de tu aplicación Next.js, puedes utilizar Konsta UI v5, una biblioteca de componentes de interfaz de usuario móvil que se adapta a la estilización de iOS y Android. Sigue estos pasos para integrar Konsta UI v5:

Instale los paquetes requeridos (Konsta UI v5):

bun add konsta

Importe el tema de Konsta UI en su archivo CSS principal (por ejemplo, styles/globals.css):

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

Configure Tailwind CSS 4 para Next.js (PostCSS):

Crear postcss.config.mjs en la raíz del proyecto:

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

Tailwind v4 utiliza PostCSS directamente en Next.js. Mantenga sus importaciones globales en styles/globals.css (ya agregado anteriormente).

Envuelva su aplicación con el componente de Konsta UI v5 App Página de ejemplo 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;

Ahora que todo está configurado, podemos utilizar componentes de React de Konsta UI v5 en nuestras páginas de Next.js.

Actualizar el

Update the pages/index.js archivo para usar componentes de 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>
  );
}

Agregar fuente Roboto para tema de Material Design (requerido para Konsta UI v5):

En tu pages/_document.js o archivo HTML principal, agrega:

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

Reinicia el servidor de desarrollo y reconstruye la aplicación.

Tu aplicación Next.js debería tener ahora una interfaz de usuario móvil nativa impulsada por Konsta UI v5 y estilizada con Tailwind CSS 4.

Optimización de rendimiento

Para asegurar un rendimiento óptimo de tu aplicación Next.js y Capacitor, considera las siguientes prácticas recomendadas:

Minimizar el tamaño de la aplicación eliminando dependencias y recursos innecesarios.
Optimizar imágenes y otros archivos de medios para reducir los tiempos de carga.
Implementar carga difusa para componentes y páginas para mejorar el rendimiento de carga inicial.
Utilizar renderizado en servidor (SSR) con Next.js para mejorar la velocidad de carga de la aplicación y la optimización de motores de búsqueda (SEO).
Leverage Capacitor’s built-in optimizaciones, como el caché de la vista web y la compilación de la aplicación.

Conclusión

Has convertido exitosamente tu aplicación web Next.js existente en aplicaciones nativas de iOS y Android utilizando Capacitor 8. Ahora tu código web se ejecuta nativamente en dispositivos móviles con acceso a APIs de dispositivos.

Lo que lograste:

Configuraste Next.js para exportación estática
Agregaste Capacitor 8 con plugins esenciales
Construyó y desplegó a simuladores de iOS y Android
Habilitó la recarga en vivo para el desarrollo
Opcionalmente agregó Konsta UI para componentes que se ven nativos

Pasos siguientes:

Configuración Capgo para actualizaciones por aire sin la necesidad de volver a presentar la aplicación en la tienda
Agregar más plugins nativos como la cámara, la geolocalización o las notificaciones push
Configurar iconos de aplicación y pantallas de bienvenida para producción
Preparar su aplicación para la presentación en la tienda de App Store y Google Play

Está empezando un nuevo proyecto? Consulte Crear una aplicación móvil de Next.js desde cero para una guía paso a paso.

Recursos

Aprende cómo Capgo puede ayudarte a crear aplicaciones mejoradas de manera más rápida, regístrate para una cuenta gratuita hoy.

Convierta su aplicación de Next.js en iOS &amp; Android con Capacitor 8