nextjs template
1.0.0
Этот шаблон демонстрирует, как разработчики могут реализовать веб -приложение на платформе Telegram Mini Apps, используя следующие технологии и библиотеки:
Шаблон был создан с использованием PNPM. Следовательно, это необходимо использовать его и для этого проекта. Используя другие менеджеры пакетов, вы получите соответствующую ошибку.
Если вы только что клонировали этот шаблон, вы должны установить зависимости проекта, используя команду:
pnpm installЭтот проект содержит следующие сценарии:
dev Запускает приложение в режиме разработки.dev:https . Запускает приложение в режиме разработки, используя самореагированный сертификат SSL.build . Создает приложение для производства.start . Запускает сервер lete.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 для наиболее точного представления своей реальной функции.
Чтобы запустить приложение внутри 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. Этот подход обеспечивает полный опыт разработки.
Самый простой способ развернуть ваше приложение.
Ознакомьтесь с документацией по развертыванию следующей.js для получения более подробной информации.
