2025 Construir Aplicaciones Móviles Nativas con Next.js 15 y Capacitor: Una Guía Paso a Paso

Introducción

En este tutorial, exploraremos cómo crear aplicaciones móviles nativas utilizando la poderosa combinación de Next.js 15 y Capacitor en 2024. Aprovechando las últimas versiones de estas tecnologías, puedes construir aplicaciones móviles de alto rendimiento y ricas en características con facilidad. También demostraremos cómo mejorar la interfaz de usuario móvil utilizando Konsta UI y Tailwind CSS, aunque este paso es opcional.

Next.js, un popular marco de React, proporciona una base sólida para construir aplicaciones web, mientras que Capacitor te permite transformar tu aplicación Next.js en una aplicación móvil nativa sin modificaciones significativas o la necesidad de aprender nuevas habilidades como React Native. Este tutorial te guiará a través del proceso, comenzando con la configuración de una nueva aplicación Next.js e integrando Capacitor para crear una experiencia móvil nativa.

Beneficios de Usar Next.js y Capacitor

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

Preparando Tu Aplicación Next.js

Para comenzar, vamos a crear una nueva aplicación Next.js utilizando el comando create-next-app:

npx create-next-app@latest my-app

Este comando configurará un proyecto vacío de Next.js con la configuración recomendada para la última versión.

A continuación, navega al directorio del proyecto:

cd my-app

Para crear una aplicación móvil nativa, necesitamos generar una exportación estática de nuestro proyecto Next.js. Actualiza el archivo package.json para incluir un script para construir y exportar el proyecto:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "NEXT_PUBLIC_IS_MOBILE=true next build"
  }
}

Ejecutar el comando npm run static puede resultar en errores debido a la incompatibilidad de optimización de imágenes. Para resolver esto, abre el archivo next.config.js y modifícalo de la siguiente manera:

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

module.exports = nextConfig;

Ahora, ejecutar npm run static debería funcionar sin problemas, y encontrarás una nueva carpeta out en la raíz de tu proyecto. Esta carpeta será utilizada por Capacitor en los siguientes pasos.

Agregando Capacitor a Tu Aplicación Next.js 15

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

1. Instala el Capacitor CLI como una dependencia de desarrollo:

npm install -D @capacitor/cli

2. Inicializa Capacitor en tu proyecto Next.js:

npx cap init

Durante el proceso de inicialización, puedes presionar “Enter” para aceptar los valores predeterminados para el nombre de la aplicación y el ID del paquete.

3. Instala los paquetes requeridos de Capacitor:

npm install @capacitor/core @capacitor/ios @capacitor/android

4. Agrega las plataformas nativas:

npx cap add ios
npx cap add android

Capacitor creará carpetas para cada plataforma (ios y android) en la raíz de tu proyecto. Estas carpetas contienen los proyectos nativos para iOS y Android, respectivamente.

Para acceder y construir el proyecto de Android, necesitas tener Android Studio instalado. Para el desarrollo de iOS, necesitas un Mac con Xcode instalado.

5. Configura Capacitor:

Abre el archivo capacitor.config.ts y actualiza la propiedad webDir para apuntar al directorio de salida de tu construcción de Next.js:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "out",
  "bundledWebRuntime": false
}

6. Construye y sincroniza tu proyecto:

npm run static
npx cap sync

El comando npm run static construye tu proyecto Next.js y exporta los archivos estáticos, mientras que npx cap sync sincroniza el código web 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 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 la Consola de Google Play para Android.

1. Abre los proyectos nativos:

Para iOS:

npx cap open ios

Para Android:

npx cap open android

2. Construye y ejecuta la aplicación:

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

• En Xcode, configura tu cuenta de firma para desplegar la aplicación en un dispositivo real. Si no has hecho esto antes, Xcode te guiará a través del proceso (ten en cuenta que necesitas estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haz clic en el botón “Reproducir” 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.

Recarga en Vivo de Capacitor

Durante el desarrollo, puedes aprovechar la recarga en vivo para ver los cambios al instante en tu dispositivo móvil. Para habilitar esta función, 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 el archivo capacitor.config.ts para incluir la configuración del servidor:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

export default config;

Reemplaza YOUR_IP_ADDRESS con tu dirección IP local.

3. Aplica los cambios a tu proyecto nativo:

npx cap copy

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

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 instalas nuevos complementos o realizas cambios en archivos nativos, necesitarás reconstruir el proyecto nativo, ya que la recarga en vivo solo se aplica a los cambios en el código web.

Usando Complementos de Capacitor

Los complementos de Capacitor te permiten acceder a las características nativas del dispositivo desde tu aplicación Next.js. Vamos a explorar cómo usar el complemento Share como un ejemplo:

1. Instala el complemento Share:

npm i @capacitor/share

2. Actualiza el archivo pages/index.js para usar el complemento Share:

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. Sincroniza los cambios con el proyecto nativo:

Como se mencionó anteriormente, al instalar nuevos complementos, necesitamos realizar una operación de sincronización y luego redistribuir la aplicación en nuestro dispositivo. Para hacer esto, ejecuta el siguiente comando:

npx cap sync

4. Reconstruye y ejecuta la aplicación en tu dispositivo.

Ahora, cuando hagas clic en el botón “¡Compartir ahora!”, aparecerá el cuadro de diálogo nativo de compartir, permitiéndote compartir el contenido con otras aplicaciones.

npm i konsta

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

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