nextjs template
1.0.0
เทมเพลตนี้แสดงให้เห็นว่านักพัฒนาสามารถใช้เว็บแอปพลิเคชันบนแพลตฟอร์ม Telegram Mini Apps ได้อย่างไรโดยใช้เทคโนโลยีและห้องสมุดต่อไปนี้:
เทมเพลตถูกสร้างขึ้นโดยใช้ PNPM ดังนั้นจึงจำเป็นต้องใช้มันสำหรับโครงการนี้เช่นกัน การใช้ผู้จัดการแพ็คเกจอื่น ๆ คุณจะได้รับข้อผิดพลาดที่เกี่ยวข้อง
หากคุณเพิ่งโคลนเทมเพลตนี้คุณควรติดตั้งการพึ่งพาโครงการโดยใช้คำสั่ง:
pnpm installโครงการนี้มีสคริปต์ต่อไปนี้:
dev . รันแอปพลิเคชันในโหมดการพัฒนาdev:https รันแอปพลิเคชันในโหมดการพัฒนาโดยใช้ใบรับรอง SSL ที่ลงนามด้วยตนเองbuild . สร้างแอปพลิเคชันสำหรับการผลิตstart . เริ่มต้นเซิร์ฟเวอร์ Next.js ในโหมดการผลิตlint รัน ESLINT เพื่อให้แน่ใจว่าคุณภาพของรหัสเป็นไปตามมาตรฐานที่ต้องการ ในการเรียกใช้สคริปต์ให้ใช้คำสั่ง pnpm run :
pnpm run {script}
# Example: pnpm run build ก่อนที่คุณจะเริ่มตรวจสอบให้แน่ใจว่าคุณได้สร้างบอทโทรเลขแล้ว นี่คือคำแนะนำที่ครอบคลุมเกี่ยวกับวิธีการทำ
แม้ว่าแอพขนาดเล็กได้รับการออกแบบให้เปิดภายในแอปพลิเคชันโทรเลข แต่คุณยังสามารถพัฒนาและทดสอบพวกเขานอกโทรเลขในระหว่างกระบวนการพัฒนา
ในการเรียกใช้แอปพลิเคชันในโหมดการพัฒนาให้ใช้สคริปต์ dev :
pnpm run devหลังจากนี้คุณจะเห็นข้อความที่คล้ายกันในเทอร์มินัลของคุณ:
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s ในการดูแอปพลิเคชันคุณต้องเปิดลิงค์ Local ( http://localhost:3000 ในตัวอย่างนี้) ในเบราว์เซอร์ของคุณ
เป็นสิ่งสำคัญที่จะต้องทราบว่าห้องสมุดบางแห่งในเทมเพลตนี้เช่น @telegram-apps/sdk ไม่ได้มีไว้สำหรับใช้นอกโทรเลข
อย่างไรก็ตามพวกเขาดูเหมือนจะทำงานได้อย่างถูกต้อง นี่เป็นเพราะไฟล์ src/hooks/useTelegramMock.ts ซึ่งนำเข้าในส่วนประกอบ Root ของแอปพลิเคชันใช้ฟังก์ชัน mockTelegramEnv เพื่อจำลองสภาพแวดล้อมโทรเลข เคล็ดลับนี้ทำให้แอปพลิเคชันที่ใช้งานอยู่ในสภาพแวดล้อมที่ใช้โทรเลข ดังนั้นจงระมัดระวังไม่ใช้ฟังก์ชั่นนี้ในโหมดการผลิตเว้นแต่คุณจะเข้าใจความหมายของมันอย่างเต็มที่
แม้ว่าจะเป็นไปได้ที่จะเรียกใช้แอปพลิเคชันนอกโทรเลข แต่ก็ขอแนะนำให้พัฒนาภายในโทรเลขเพื่อแสดงถึงการทำงานที่แม่นยำที่สุดของการทำงานในโลกแห่งความเป็นจริง
ในการเรียกใช้แอปพลิเคชันภายใน Telegram @botfather ต้องใช้ลิงก์ HTTPS
เทมเพลตนี้มีวิธีแก้ปัญหาแล้ว
ในการดึงลิงก์ด้วยโปรโตคอล HTTPS ให้พิจารณาใช้สคริปต์ dev:https :
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s เยี่ยมชมลิงค์ Local ( https://localhost:3000 ในตัวอย่างนี้) ในเบราว์เซอร์ของคุณคุณจะเห็นคำเตือนต่อไปนี้:
คำเตือนเบราว์เซอร์นี้เป็นเรื่องปกติและสามารถเพิกเฉยได้อย่างปลอดภัยตราบใดที่ไซต์ปลอดภัย คลิกปุ่ม Proceed to localhost (unsafe) เพื่อดำเนินการต่อและดูแอปพลิเคชัน
เมื่อแอปพลิเคชันแสดงอย่างถูกต้องแล้วให้ส่งลิงค์ https://127.0.0.1:3000 ( https://localhost:3000 ถือว่าเป็น botfather) เป็นลิงค์ Mini App ไปยัง @botfather จากนั้นนำทางไปที่ https://web.telegram.org/k/, ค้นหาบอทของคุณและเปิดแอพ Telegram Mini วิธีการนี้ให้ประสบการณ์การพัฒนาอย่างเต็มรูปแบบ
วิธีที่ง่ายที่สุดในการปรับใช้แอป Next.js ของคุณคือการใช้แพลตฟอร์ม vercel จากผู้สร้างของ Next.js
ตรวจสอบเอกสารการปรับใช้ next.js สำหรับรายละเอียดเพิ่มเติม
