nextjs tailwind ionic capacitor starter

next.js + tailwind css + ionic framework + ตัวเก็บประจุมือถือเริ่มต้น

repo นี้เป็นจุดเริ่มต้นเชิงแนวคิดสำหรับการสร้าง iOS, Android และเว็บแอปก้าวหน้าด้วย Next.js, Tailwind CSS, เฟรมเวิร์กไอออนิกและตัวเก็บประจุ

Next.js จัดการประสบการณ์แอปที่ตอบสนองการผลิตสามารถใช้แบบ Tailwind เพื่อจัดสไตล์แต่ละหน้าของแอพของคุณเฟรมเวิร์กไอออนิกให้การควบคุมระบบข้ามแพลตฟอร์ม (การนำทาง/การเปลี่ยน/แท็บ/ฯลฯ ) จากนั้นรวมตัวเก็บประจุรวมกันทั้งหมดและวิ่งบน iOS, Android

ดูโพสต์บล็อกนี้เพื่อดูภาพรวมของสแต็กและวิธีการทำงานทั้งหมด: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework และ capacitor-3kij

การใช้งาน

โครงการนี้เป็นแอพมาตรฐาน next.js ดังนั้นกระบวนการพัฒนา Next.js ทั่วไปจะใช้ ( npm run dev สำหรับการพัฒนาตามเบราว์เซอร์) อย่างไรก็ตามมีข้อแม้หนึ่งข้อ: แอพจะต้องส่งออกเพื่อปรับใช้กับ iOS และ Android เนื่องจากต้องเรียกใช้ฝั่งไคลเอ็นต์อย่างหมดจด (เพิ่มเติมเกี่ยวกับการส่งออก next.js)

ในการสร้างแอพ Run:

npm run build

ไฟล์ฝั่งไคลเอ็นต์ทั้งหมดจะถูกส่งไปยังไดเรกทอรี ./out/ / ไฟล์เหล่านี้จำเป็นต้องคัดลอกไปยังโครงการ iOS และ Android ดั้งเดิมและนี่คือที่ที่ตัวเก็บประจุเข้ามา:

npm run sync

สุดท้ายใช้คำสั่ง RUN ต่อไปนี้เพื่อเรียกใช้แอพในแต่ละแพลตฟอร์ม:

npm run ios
npm run android

Livereload/Refresh ทันที

ในการเปิดใช้งาน LiverEload และ Refresh ทันทีระหว่างการพัฒนา (เมื่อเรียกใช้ npm run dev ) ให้ค้นหาที่อยู่ IP ของอินเทอร์เฟซในพื้นที่ของคุณ (เช่น: 192.168.1.2 ) และพอร์ตเซิร์ฟเวอร์ถัดไปของคุณกำลังทำงานอยู่แล้วตั้งค่าการกำหนดค่า URL เซิร์ฟเวอร์ให้ชี้ไปที่ capacitor.config.json

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

หมายเหตุ: การกำหนดค่านี้จะง่ายขึ้นในตัวเก็บประจุ 3 ซึ่งเพิ่งเข้าสู่เบต้า

เส้นทาง API

สามารถใช้เส้นทาง API ได้ แต่จำเป็นต้องมีการกำหนดค่าขั้นต่ำ ดูการสนทนานี้สำหรับข้อมูลเพิ่มเติม

คำเตือน

หนึ่งข้อแม้กับโครงการนี้: เนื่องจากแอพจะต้องสามารถเรียกใช้ฝั่งไคลเอ็นต์ล้วนๆและใช้คำสั่งการส่งออกของ next.js ซึ่งหมายความว่าไม่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ในฐานรหัสนี้ มีแนวโน้มที่จะเป็นวิธีการ SSR และแอป Next.js แบบคงที่อย่างเต็มที่ แต่ต้องใช้ปลั๊กอิน Babel หรือจะเกี่ยวข้องกับการตั้งค่า monorepo ที่ซับซ้อนยิ่งขึ้นพร้อมกับการแบ่งปันรหัสที่อยู่นอกขอบเขตสำหรับโครงการนี้

นอกจากนี้การกำหนดเส้นทาง next.js ไม่ได้ใช้มากนักในแอพนี้นอกเหนือจากเส้นทางที่จับได้ทั้งหมดเพื่อแสดงผลของเชลล์แอพดั้งเดิมและมีส่วนร่วมกับเราเตอร์ปฏิกิริยาอิออน นี่เป็นเพราะการกำหนดเส้นทาง next.js ไม่ได้ถูกตั้งค่าเพื่อเปิดใช้งานการเปลี่ยนรูปแบบดั้งเดิมและการจัดการสถานะประวัติศาสตร์เช่นการใช้ไอออนิกชนิด

ตัวเก็บประจุคืออะไร?

คุณสามารถนึกถึงตัวเก็บประจุเป็น "อิเล็กตรอนสำหรับมือถือ" ที่ใช้งานเว็บแอพมาตรฐานบน iOS, Android, เดสก์ท็อปและเว็บ

ตัวเก็บประจุให้การเข้าถึง API ดั้งเดิมและระบบปลั๊กอินสำหรับการสร้างฟังก์ชั่นดั้งเดิมที่แอปต้องการ

แอพตัวเก็บประจุยังสามารถทำงานในเบราว์เซอร์เป็นเว็บแอปก้าวหน้าด้วยรหัสเดียวกัน