nextjs tailwind ionic capacitor starter

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

Repo ini adalah titik awal konseptual untuk membangun aplikasi web iOS, Android, dan progresif dengan Next.js, CSS tailwind, kerangka ionik, dan kapasitor.

Next.js Menangani Pengalaman Aplikasi React Produksi, Tailwind dapat digunakan untuk menata setiap halaman aplikasi Anda, Ionic Framework menyediakan kontrol sistem lintas platform (navigasi/transisi/tab/dll.), Dan kemudian kapasitor menggabungkan semuanya dan menjalankannya di iOS, android, dan web dengan akses asli penuh.

Lihat posting blog ini untuk ikhtisar tumpukan dan cara kerjanya: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-sionic-framework-and-capacitor-3kij

Penggunaan

Proyek ini adalah aplikasi standar Next.js, sehingga proses pengembangan selanjutnya yang khas berlaku ( npm run dev untuk pengembangan berbasis browser). Namun, ada satu peringatan: aplikasi harus diekspor untuk digunakan ke iOS dan Android, karena harus berjalan murni sisi klien. (lebih lanjut tentang Ekspor Next.js)

Untuk membangun aplikasi, jalankan:

npm run build

Semua file sisi klien akan dikirim ke direktori ./out/ . File -file ini perlu disalin ke proyek iOS dan Android asli, dan di sinilah kapasitor masuk:

npm run sync

Akhirnya, gunakan perintah run berikut untuk menjalankan aplikasi di setiap platform:

npm run ios
npm run android

Refresh Livereload/Instan

Untuk mengaktifkan LivereLoad dan Refresh Instan selama pengembangan (saat menjalankan npm run dev ), temukan alamat IP antarmuka lokal Anda (mis: 192.168.1.2 ) dan port server capacitor.config.json .

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

Catatan: Konfigurasi ini akan lebih mudah di Capacitor 3 yang baru -baru ini masuk ke beta.

Rute API

Rute API dapat digunakan tetapi beberapa konfigurasi minimal diperlukan. Lihat diskusi ini untuk informasi lebih lanjut.

Peringatan

Satu peringatan dengan proyek ini: karena aplikasi harus dapat menjalankan murni sisi klien dan menggunakan perintah ekspor selanjutnya. Kemungkinan ada cara untuk SSR dan aplikasi selanjutnya yang sepenuhnya statis.

Selain itu, routing Next.js tidak benar-benar banyak digunakan dalam aplikasi ini di luar rute tangkap untuk membuat shell aplikasi asli dan melibatkan router reaksi ionik. Ini terutama karena routing selanjutnya.

Apa itu kapasitor?

Anda dapat menganggap kapasitor sebagai semacam "elektron untuk seluler" yang menjalankan aplikasi web standar di iOS, android, desktop, dan web.

Kapasitor menyediakan akses ke API asli dan sistem plugin untuk membangun fungsionalitas asli apa pun yang dibutuhkan aplikasi Anda.

Aplikasi kapasitor juga dapat berjalan di browser sebagai aplikasi web progresif dengan kode yang sama.