nextjs tailwind ionic capacitor starter

Next.js + Tailwind CSS + Ionic Framework + Condensateur Mobile Starter

Ce repo est un point de départ conceptuel pour la création d'une application Web iOS, Android et progressive avec Next.js, CSS Tailwind, Ionic Framework et condensateur.

Next.js gère l'expérience de l'application React React, peut être utilisée pour styliser chaque page de votre application, Ionic Framework fournit les commandes du système multiplateforme (navigation / transitions / onglets / etc.), puis les condensateurs regroupent le tout et l'exécute sur iOS, Android et Web avec un accès plein natif.

Voir cet article de blog pour un aperçu de la pile et comment tout cela fonctionne: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij

Usage

Ce projet est une application standard Next.js, de sorte que le processus de développement typique Next.js s'applique ( npm run dev pour le développement basé sur le navigateur). Cependant, il y a une mise en garde: l'application doit être exportée vers le déploiement vers iOS et Android, car elle doit fonctionner purement côté client. (plus sur l'exportation suivante.js)

Pour créer l'application, exécutez:

npm run build

Tous les fichiers côté client seront envoyés au répertoire ./out/ . Ces fichiers doivent être copiés dans les projets iOS et Android natifs, et c'est là que le condensateur entre en jeu:

npm run sync

Enfin, utilisez les commandes d'exécution suivantes pour exécuter l'application sur chaque plate-forme:

npm run ios
npm run android

Refresure de Liveleload / instantané

Pour activer LiveReload et Instant Refresh pendant le développement (lors de l'exécution npm run dev ), trouvez l'adresse IP de votre interface locale (Ex: 192.168.1.2 ) et portez votre serveur Next.js, puis définissez la valeur de configuration de l'URL du serveur pour le pointer dans capacitor.config.json :

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

Remarque: Cette configuration sera plus facile dans le condensateur 3 qui est récemment entré en version bêta.

Routes API

Les routes API peuvent être utilisées, mais une configuration minimale est requise. Voir cette discussion pour plus d'informations.

Mises en garde

Une mise en garde avec ce projet: Parce que l'application doit être en mesure d'exécuter purement côté client et d'utiliser la commande d'exportation de Next.js, cela signifie aucun rendu côté serveur dans cette base de code. Il existe probablement un moyen de SSR et une application Next.js entièrement statique en tandem, mais elle nécessite un plugin Babel ou impliquerait une configuration monorepo plus élaborée avec partage de code qui est hors de portée pour ce projet.

De plus, le routage Next.js n'est pas vraiment utilisé dans cette application au-delà d'une voie de fourre-tout pour rendre le shell d'application natif et engager le routeur de réaction ionique. Cela est principalement dû au fait que le routage Next.js n'est pas configuré pour activer les transitions de style natif et la gestion de l'état de l'histoire comme le genre d'utilisations ioniques.

Qu'est-ce que le condensateur?

Vous pouvez considérer le condensateur comme une sorte de "électron pour mobile" qui exécute des applications Web standard sur iOS, Android, Desktop et Web.

Le condensateur donne accès aux API natives et à un système de plugin pour la création de toute fonctionnalité native dont votre application a besoin.

Les applications de condensateurs peuvent également s'exécuter dans le navigateur en tant qu'application Web progressive avec le même code.