Convierta su próxima aplicación Next.js en iOS & Android con Capacitor 8

Introducción

Tiene una aplicación web 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 mejoras de rendimiento y nuevas características.

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

Lo que aprenderá:

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

¿Quieres empezar un nuevo 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

• Reutilización de Code con Next.js: Next.js te permite escribir componentes reutilizables y compartir code entre tus aplicaciones web y móviles, ahorrando tiempo y esfuerzo en el desarrollo.
• Rendimiento: Next.js ofrece optimizaciones de rendimiento integradas, como renderizado en servidor y code de código, garantizando tiempos de carga rápidos y una experiencia de usuario suave.
• Capacidades Nativas: Capacitor ofrece acceso a características de dispositivos nativos 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 existente Next.js 15+ Xcode
• instalado (para el desarrollo de iOS, solo macOS)
• Android Studio (para el desarrollo de Android)

Configuración de su aplicación Next.js para 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) archivo 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 } salta la optimización de imágenes de Next.js que requiere un servidor.

Importante: Si está utilizando características que requieren un servidor (API rutas, 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. Esta 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:

1. Instalar Capacitor core y CLI:

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

2. Instalar plugins comunes de Capacitor que probablemente necesitará:

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

Estos plugins proporcionan características esenciales:

• @capacitor/app: Manejar eventos de ciclo de vida de la aplicación (anterior/plano, URLs)
• @capacitor/teclado: Controlar el comportamiento del teclado en móviles
• @capacitor/pantalla-de-inicio: Administrar la pantalla de inicio nativa
• @capacitor/preferencias: Almacenar datos clave-valor de manera persistente

3. Inicialice Capacitor con los detalles de su proyecto:

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

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

4. Cree o actualice 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;

5. Instale plataformas nativas:

bun add @capacitor/ios @capacitor/android

6. Agregue las carpetas de la plataforma nativa:

bunx cap add ios
bunx cap add android

Capacitor creará ios y android carpetas en la raíz del proyecto que contienen los proyectos nativos.

Para compilar el proyecto Android, necesita Android Studio. Para iOS, necesita un Mac con Xcode.

7. Compilar y sincronizar su proyecto:

bun run mobile

Esto ejecuta su script personalizado que compila el proyecto Next.js y sincroniza los archivos estáticos con las plataformas nativas.

Desarrollar y Desplegar Aplicaciones Nativas

To construir y desplegar tu aplicación móvil nativa, sigue estos pasos: Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones Android, necesitas tener Android Studio instalado. 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.

1. 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

2. Construye y ejecuta la aplicación:

• En Android Studio, espera a que el proyecto esté listo, y luego haz clic en el botón "Ejecutar" para desplegar la aplicación en un dispositivo conectado o emulador.

• Configura tu cuenta de firma en Xcode para desplegar la aplicación en un dispositivo real. Si no lo has hecho antes, Xcode te guiará a través del proceso (ten en cuenta que debes estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haz clic en el botón "Play" para ejecutar la aplicación en tu dispositivo conectado.

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

Capacitor Live Reload

Durante el desarrollo, puedes aprovechar la recompilación en vivo para ver los cambios instantáneamente en tu dispositivo móvil. Para habilitar esta característica, sigue estos pasos:

1. Encuentra tu dirección IP local:

• En macOS, ejecuta el siguiente comando en la terminal:

  ipconfig getifaddr en0

• En Windows, ejecuta:

  ipconfig

  Busca la dirección IPv4 en la salida.

2. Actualiza tu configuración capacitor.config.ts To apuntar a tu 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;

Sustituye YOUR_IP_ADDRESS por tu dirección IP local (por ejemplo, 192.168.1.100).

3. Aplica los cambios a tu proyecto nativo:

bunx cap copy

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

4. Reconstruye y ejecuta la aplicación en tu dispositivo utilizando Android Studio o Xcode.

Ahora, cada vez que realices cambios en tu aplicación Next.js, la aplicación móvil se recargará automáticamente para reflejar esos cambios.

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

Usando Capacitor Plugins

Los plugins Capacitor te permiten acceder a características de dispositivos nativos desde tu aplicación Next.js. Explorémoslo cómo usar el plugin Compartir Share plugin As an example:

1. Instale el plugin de Compartir:

bun add @capacitor/share

2. Actualizar 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>
  );
}

3. Sincronice los cambios con el proyecto nativo:

Como se mencionó anteriormente, al instalar nuevos plugins, debemos realizar una operación de sincronización y luego reemplazar la aplicación en nuestro dispositivo. Para hacer esto, ejecute el siguiente comando:

bun run mobile

O simplemente sincronice sin reconstruir:

bunx cap sync

4. Reconstruya y ejecute la aplicación en su dispositivo.

Ahora, cuando haga clic en el botón 'Compartir ahora!', se mostrará el diálogo de compartir nativo, permitiéndole 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

I 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 de Next.js, puedes utilizar Konsta UI v5, una biblioteca de componentes de interfaz de usuario móvil amigable con el usuario que se adapta a la estilización de iOS y Android. Sigue estos pasos para integrar Konsta UI v5:

1. Instala los paquetes requeridos (Konsta UI v5):

bun add konsta

2. Importa el tema de Konsta UI en tu archivo CSS principal (por ejemplo, __CAPGO_KEEP_0__): styles/globals.css):

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

3. 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).

4. Envuelva su aplicación con el componente de UI Konsta v5 App en 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;

Página de Ejemplo

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

5. Actualizar el pages/index.js archivo para utilizar componentes de 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>
  );
}

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

In tu archivo HTML principal, agrega: pages/_document.js Reinicia el servidor de desarrollo y reconstruye la aplicación.

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

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

Optimización de rendimiento

Para asegurarte de que tu aplicación de Next.js y __CAPGO_KEEP_0__ tenga un rendimiento óptimo, considera las siguientes prácticas recomendadas:

To ensure optimal performance of your Next.js and Capacitor app, consider the following best practices:

• Optimiza las imágenes y otros archivos de medios para reducir los tiempos de carga.
• Implementa la carga difusa para componentes y páginas para mejorar el rendimiento de carga inicial.
• Utiliza la renderización del lado del 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).
• Utiliza las optimizaciones integradas de __CAPGO_KEEP_0__ como caché de vista web y empaquetado de la aplicación.
• Leverage Capacitor’s built-in optimizations, such as web view caching and app bundling.

Para asegurarte de que tu aplicación de Next.js y __CAPGO_KEEP_0__ tenga un rendimiento óptimo, considera las siguientes prácticas recomendadas:

Ha convertido con éxito su aplicación web de Next.js en aplicaciones nativas de iOS y Android utilizando Capacitor 8. Ahora su código base web se ejecuta de forma nativa en dispositivos móviles con acceso a APIs de dispositivo.

Lo que ha logrado:

• Configuró Next.js para exportación estática
• Agregó Capacitor 8 con plugins esenciales
• Compiló y desplegó en 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 sin conexión sin la necesidad de volver a presentar la aplicación en la tienda
• Agregue más plugins nativos como Cámara, Geolocalización o Notificaciones Push
• Configura íconos de la aplicación y pantallas de bienvenida para producción
• Prepara tu aplicación para la presentación en App Store y Google Play

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

Recursos

• Documentación de Next.js
• Capacitor 8 Documentación
• Documentación de Konsta UI v5
• Capgo - Actualizaciones en vivo para Capacitor Apps

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

Sigue adelante desde Convertir tu aplicación de Next.js a iOS & Android con Capacitor 8

Si estás utilizando Convertir tu aplicación de Next.js a iOS & Android con Capacitor 8 para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Ionic Enterprise Plugin Alternatives, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.