nextjs template
1.0.0
Templat ini menunjukkan bagaimana pengembang dapat mengimplementasikan aplikasi web pada platform aplikasi mini telegram menggunakan teknologi dan perpustakaan berikut:
Templat dibuat menggunakan PNPM. Oleh karena itu, diperlukan untuk menggunakannya untuk proyek ini juga. Menggunakan manajer paket lainnya, Anda akan menerima kesalahan yang sesuai.
Jika Anda baru saja mengkloning template ini, Anda harus menginstal dependensi proyek menggunakan perintah:
pnpm installProyek ini berisi skrip berikut:
dev . Menjalankan aplikasi dalam mode pengembangan.dev:https . Menjalankan aplikasi dalam mode pengembangan menggunakan sertifikat SSL yang ditandatangani sendiri.build . Membangun aplikasi untuk produksi.start . Mulai server berikutnya.js dalam mode produksi.lint . Menjalankan Eslint untuk memastikan kualitas kode memenuhi standar yang diperlukan. Untuk menjalankan skrip, gunakan perintah pnpm run :
pnpm run {script}
# Example: pnpm run build Sebelum Anda mulai, pastikan Anda telah membuat bot telegram. Berikut adalah panduan komprehensif tentang cara melakukannya.
Meskipun aplikasi mini dirancang untuk dibuka dalam aplikasi telegram, Anda masih dapat mengembangkan dan mengujinya di luar telegram selama proses pengembangan.
Untuk menjalankan aplikasi dalam mode pengembangan, gunakan skrip dev :
pnpm run devSetelah ini, Anda akan melihat pesan serupa di terminal Anda:
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s Untuk melihat aplikasi, Anda perlu membuka tautan Local ( http://localhost:3000 dalam contoh ini) di browser Anda.
Penting untuk dicatat bahwa beberapa perpustakaan dalam templat ini, seperti @telegram-apps/sdk , tidak dimaksudkan untuk digunakan di luar telegram.
Namun demikian, mereka tampak berfungsi dengan baik. Ini karena file src/hooks/useTelegramMock.ts , yang diimpor dalam komponen Root aplikasi, menggunakan fungsi mockTelegramEnv untuk mensimulasikan lingkungan telegram. Trik ini meyakinkan aplikasi bahwa ia berjalan di lingkungan berbasis telegram. Oleh karena itu, berhati -hatilah untuk tidak menggunakan fungsi ini dalam mode produksi kecuali Anda sepenuhnya memahami implikasinya.
Meskipun dimungkinkan untuk menjalankan aplikasi di luar telegram, disarankan untuk mengembangkannya dalam telegram untuk representasi paling akurat dari fungsionalitas dunia nyata.
Untuk menjalankan aplikasi di dalam Telegram, @BotFather memerlukan tautan HTTPS.
Template ini sudah memberikan solusi.
Untuk mengambil tautan dengan protokol HTTPS, pertimbangkan untuk menggunakan skrip dev:https :
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s Mengunjungi tautan Local ( https://localhost:3000 dalam contoh ini) di browser Anda, Anda akan melihat peringatan berikut:
Peringatan browser ini normal dan dapat diabaikan dengan aman selama situs aman. Klik tombol Proceed to localhost (unsafe) untuk melanjutkan dan melihat aplikasi.
Setelah aplikasi ditampilkan dengan benar, kirim tautan https://127.0.0.1:3000 ( https://localhost:3000 dianggap tidak valid oleh Botfather) sebagai tautan aplikasi mini ke @botfather. Kemudian, arahkan ke https://web.telegram.org/k/, temukan bot Anda, dan luncurkan aplikasi mini telegram. Pendekatan ini memberikan pengalaman pengembangan penuh.
Cara termudah untuk menggunakan aplikasi selanjutnya.js Anda adalah dengan menggunakan platform Vercel dari pencipta Next.js.
Lihatlah dokumentasi penempatan selanjutnya.js untuk lebih jelasnya.
