nextjs tailwind ionic capacitor starter Download - nextjs tailwind ionic capacitor starter Quellcode Download

nextjs tailwind ionic capacitor starter

AI-Quellcode

5.0.0

Herunterladen

Weiter.JS + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter

Screenshot

Dieses Repo ist ein konzeptioneller Ausgangspunkt für den Aufbau einer iOS-, Android- und progressiven Web -App mit Next.js, Rückenwind -CSS, Ionic Framework und Kondensator.

Als nächstes verwaltet Js die Produktionsreakt-App-Erfahrung, mit Rückenwind können jede Seite Ihrer App stylen. Ionic Framework liefert die plattformübergreifenden Systemsteuerungen (Navigation/Übergänge/Registerkarten/etc.) und dann den Kondensatorbündel alles und führt sie auf iOS, Android und Web mit vollem nativem Zugang aus.

In diesem Blog-Beitrag finden Sie einen Überblick über den Stack und wie alles funktioniert: https://dev.to/ionic/build-mobile-apps-with-tailwind-next-js-ionic-framework-and-capacitor-3kij

Verwendung

Dieses Projekt ist eine Standard-App-App. Daher gilt der typische Next.js-Entwicklungsprozess ( npm run dev für die browserbasierte Entwicklung). Es gibt jedoch eine Einschränkung: Die App muss so exportiert werden, um in iOS und Android bereitzustellen, da sie nur kundenseitig ausgeführt werden muss. (Mehr zum Export von Next.js)

Um die App zu erstellen, rennen Sie:

npm run build

Alle Client -Seitendateien werden an das Verzeichnis ./out/ gesendet. Diese Dateien müssen in die nativen iOS- und Android -Projekte kopiert werden, und hier kommt der Kondensator ins Spiel:

npm run sync

Verwenden Sie schließlich die folgenden Ausführungsbefehle, um die App auf jeder Plattform auszuführen:

npm run ios
npm run android

Leberoad/Sofortige Aktualisierung

So finden Sie die IP -Adresse Ihrer lokalen Schnittstelle (Ex: 192.168.1.2 ) und portieren Sie Ihren nächsten.js -Server auf und setzen Sie dann den Server -URL -Konfigurationswert npm run dev um in capacitor.config.json zu verweisen:

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

Hinweis: Diese Konfiguration wird in Kondensator 3 einfacher sein, das kürzlich in die Beta eingegangen ist.

API -Routen

API -Routen können verwendet werden, aber es sind eine minimale Konfiguration erforderlich. Weitere Informationen finden Sie in dieser Diskussion.

Einschränkungen

Eine Einschränkung mit diesem Projekt: Da die App in der Lage sein muss, rein clientseitig auszuführen und den Exportbefehl von Next.JS zu verwenden, bedeutet dies, dass in dieser Codebasis kein Server-Rendering in dieser Codebasis ausgeführt wird. Es gibt wahrscheinlich eine Möglichkeit, SSR und eine vollstatische Next.js -App in Tandem zu erhalten, aber es erfordert ein Babel -Plugin oder würde ein aufwändigeres Monorepo -Setup mit Code -Freigabe beinhalten.

Darüber hinaus wird das Routing von Next.js in dieser App nicht wirklich viel verwendet, um die native App Shell zu rendern und den Ionic React-Router zu engagieren. Dies liegt in erster Linie daran, dass das Routing von Next.js nicht eingerichtet ist, um Übergänge im nativen Stil und das staatliche Verwaltungsmanagement im Geschicht wie die freundlichen ionischen Verwendungen zu ermöglichen.