En los últimos años, Next.js se ha convertido en uno de los frameworks más populares para construir aplicaciones web modernas gracias a su rendimiento, flexibilidad y facilidad de uso.
Pero… ¿sabías que también puedes convertir tu proyecto de Next.js en una aplicación móvil nativa para Android e iOS?
Con la ayuda de Capacitor, podemos empaquetar nuestra app web y distribuirla en las tiendas oficiales como la Play Store o la App Store.
En este artículo te mostraré cómo hacerlo paso a paso. 🔥
Antes de comenzar, asegúrate de tener instalado:
-
Node.js (>= 18) y npm
-
Next.js ya configurado
-
Capacitor CLI
-
Android Studio (para Android)
-
Xcode (para iOS, solo en macOS)
1. Crear un proyecto con Next.js
Si aún no tienes un proyecto, créalo con el siguiente comando:
npx create-next-app@latest my-appcd my-appEjecuta el servidor de desarrollo:
npm run dev2. Instalar Capacitor
Ahora vamos a instalar Capacitor en el proyecto:
npm install @capacitor/core @capacitor/cliInicializamos Capacitor con:
npx cap init
Se te pedirá:
Nombre de la app → Ejemplo: MyApp
ID del paquete → Ejemplo: com.miempresa.myapp
3. Configurar next.config.js
Necesitamos exportar la aplicación como static build para que Capacitor pueda servirla.
Edita el archivo next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // 🚀 Exportar como sitio estático
};
module.exports = nextConfig;
Ahora genera el build estático:
npx cap add androidEsto creará una carpeta out/ con la aplicación lista para Capacitor.
4. Servir la app con Capacitor
Agrega las plataformas donde quieras correr tu app:
npx cap add androidnpx cap add iosLuego copia los archivos de Next.js a Capacitor:
npx cap copyY abre el proyecto en Android Studio o Xcode:
npx cap open iosnpx cap open android5. Probar en el emulador o dispositivo
- En Android Studio → compila y corre en el emulador o tu celular conectado.
- En Xcode → selecciona un simulador de iPhone y ejecuta la app.
Ya tendrás tu Next.js app corriendo como una aplicación móvil nativa. 🎉