nextjs template
1.0.0
يوضح هذا القالب كيف يمكن للمطورين تطبيق تطبيق ويب على منصة تطبيقات Telegram Mini باستخدام التقنيات والمكتبات التالية:
تم إنشاء القالب باستخدام PNPM. لذلك ، يجب استخدامه لهذا المشروع أيضًا. باستخدام مديري الحزم الآخرين ، ستتلقى خطأ مطابقًا.
إذا كنت قد قمت باستنساخ هذا القالب ، فيجب عليك تثبيت تبعيات المشروع باستخدام الأمر:
pnpm installيحتوي هذا المشروع على البرامج النصية التالية:
dev . يدير التطبيق في وضع التطوير.dev:https . يقوم بتشغيل التطبيق في وضع التطوير باستخدام شهادة SSL الموقعة ذاتيا.build . يبني تطبيق الإنتاج.start . يبدأ خادم Next.js في وضع الإنتاج.lint . يقوم بتشغيل ESLINT لضمان تلبية جودة الكود المعايير المطلوبة. لتشغيل البرنامج النصي ، استخدم الأمر pnpm run :
pnpm run {script}
# Example: pnpm run build قبل البدء ، تأكد من أنك قد قمت بالفعل بإنشاء روبوت برقية. هنا دليل شامل حول كيفية القيام بذلك.
على الرغم من أن التطبيقات المصغرة مصممة ليتم فتحها ضمن تطبيقات Telegram ، إلا أنه لا يزال بإمكانك تطويرها واختبارها خارج Telegram أثناء عملية التطوير.
لتشغيل التطبيق في وضع التطوير ، استخدم البرنامج النصي 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 ، ليست مخصصة للاستخدام خارج Telegram.
ومع ذلك ، يبدو أنها تعمل بشكل صحيح. وذلك لأن ملف src/hooks/useTelegramMock.ts ، والذي يتم استيراده في مكون Root للتطبيق ، يستخدم وظيفة mockTelegramEnv لمحاكاة بيئة البرقية. هذه الخدعة تقنع التطبيق الذي يعمل في بيئة تعتمد على البرقية. لذلك ، كن حذرًا لعدم استخدام هذه الوظيفة في وضع الإنتاج إلا إذا فهمت تداعياتها تمامًا.
على الرغم من أنه من الممكن تشغيل التطبيق خارج Telegram ، إلا أنه يوصى بتطويره داخل Telegram للتمثيل الأكثر دقة لوظائفها الحقيقية.
لتشغيل التطبيق داخل 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 إلى botfather. بعد ذلك ، انتقل إلى https://web.telegram.org/k/ ، ابحث عن الروبوت الخاص بك ، وقم بتشغيل تطبيق Telegram Mini. يوفر هذا النهج تجربة التنمية الكاملة.
أسهل طريقة لنشر تطبيق Next.js الخاص بك هي استخدام منصة Vercel من منشئي Next.js.
تحقق من وثائق نشر Next.js لمزيد من التفاصيل.
