nextjs tailwind ionic capacitor starter

Next.js + Tailwind CSS + marco iónico + arrancador móvil del condensador

Este repositorio es un punto de partida conceptual para construir una aplicación web iOS, Android y progresiva con Next.js, CSS de viento de cola, marco iónico y condensador.

Next.js maneja la experiencia de la aplicación de reacción de producción, Tailwind se puede utilizar para diseñar cada página de su aplicación, el marco Ionic proporciona los controles del sistema multiplataforma (navegación/transiciones/pestañas/etc.), y luego el condensador lo agrupa todo y lo ejecuta en iOS, Android y web con acceso nativo completo.

Vea esta publicación de blog para obtener una descripción general de la pila y cómo funciona: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionicframework-and-capacitor-3kij

Uso

Este proyecto es una aplicación Next.js estándar, por lo que se aplica el proceso de desarrollo Next.JS típico ( npm run dev para el desarrollo basado en el navegador). Sin embargo, hay una advertencia: la aplicación debe exportarse para implementar a iOS y Android, ya que debe ejecutar puramente del lado del cliente. (más sobre la exportación de Next.js)

Para construir la aplicación, ejecute:

npm run build

Todos los archivos del lado del cliente se enviarán al directorio ./out/ . Estos archivos deben copiarse en los proyectos nativos de iOS y Android, y aquí es donde entra el condensador:

npm run sync

Finalmente, use los siguientes comandos de ejecución para ejecutar la aplicación en cada plataforma:

npm run ios
npm run android

Livereload/actualización instantánea

Para habilitar LiverLoad y la actualización instantánea durante el desarrollo (cuando se ejecuta npm run dev ), encuentre la dirección IP de su interfaz local (ex: 192.168.1.2 ) y puerto, su servidor Next.js se está ejecutando, y luego configure el valor de configuración de URL del servidor para apuntar en capacitor.config.json :

{
  "server" : {
    "url" : " http://192.168.1.2:3000 "
  }
}

Nota: Esta configuración será más fácil en el Capacitor 3 que recientemente entró en beta.

Rutas API

Se pueden usar rutas API, pero se requiere una configuración mínima. Vea esta discusión para obtener más información.

Advertencias

Una advertencia con este proyecto: debido a que la aplicación debe ser capaz de ejecutar puramente al cliente y usar el comando de exportación de Next.js, eso significa que no hay representación del lado del servidor en esta base de código. Es probable que haya una forma de SSR y una aplicación Next.js totalmente estática en conjunto, pero requiere un complemento Babel o implicaría una configuración de Monorepo más elaborada con el intercambio de código que está fuera de alcance para este proyecto.

Además, el enrutamiento Next.js no se usa mucho en esta aplicación más allá de una ruta de atrapar para representar el caparazón de la aplicación nativa y activar el enrutador React Ionic. Esto se debe principalmente a que el enrutamiento NEXT.JS no está configurado para habilitar las transiciones de estilo nativo y la gestión del estado de la historia como el tipo de usos iónicos.

¿Qué es el condensador?

Puede pensar en el condensador como una especie de "Electron for Mobile" que ejecuta aplicaciones web estándar en iOS, Android, Desktop y Web.

El condensador proporciona acceso a API nativas y un sistema de complementos para construir cualquier funcionalidad nativa que su aplicación necesita.

Las aplicaciones de condensadores también pueden ejecutarse en el navegador como una aplicación web progresiva con el mismo código.