nextjs template
1.0.0
Esta plantilla demuestra cómo los desarrolladores pueden implementar una aplicación web en la plataforma Telegram Mini Apps utilizando las siguientes tecnologías y bibliotecas:
La plantilla se creó usando PNPM. Por lo tanto, se requiere usarlo para este proyecto también. Usando otros administradores de paquetes, recibirá un error correspondiente.
Si acaba de clonar esta plantilla, debe instalar las dependencias del proyecto utilizando el comando:
pnpm installEste proyecto contiene los siguientes scripts:
dev Ejecuta la aplicación en modo de desarrollo.dev:https . Ejecuta la aplicación en modo de desarrollo utilizando el certificado SSL autofirmado.build . Construye la aplicación de producción.start . Inicia el servidor Next.js en modo de producción.lint Ejecuta Eslint para garantizar que la calidad del código cumpla con los estándares requeridos. Para ejecutar un script, use el comando pnpm run :
pnpm run {script}
# Example: pnpm run build Antes de comenzar, asegúrese de haber creado un bot de telegrama. Aquí hay una guía completa sobre cómo hacerlo.
Aunque las mini aplicaciones están diseñadas para abrirse dentro de las aplicaciones de telegrama, aún puede desarrollarlas y probarlas fuera del telegrama durante el proceso de desarrollo.
Para ejecutar la aplicación en el modo de desarrollo, use el script dev :
pnpm run devDespués de esto, verá un mensaje similar en su terminal:
▲ Next.js 14.2.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.9s Para ver la aplicación, debe abrir el enlace Local ( http://localhost:3000 en este ejemplo) en su navegador.
Es importante tener en cuenta que algunas bibliotecas en esta plantilla, como @telegram-apps/sdk , no están destinadas a su uso fuera del telegrama.
Sin embargo, parecen funcionar correctamente. Esto se debe a que el archivo src/hooks/useTelegramMock.ts , que se importa en el componente Root de la aplicación, emplea la función mockTelegramEnv para simular el entorno de telegrama. Este truco convence a la aplicación de que se está ejecutando en un entorno basado en telegramas. Por lo tanto, tenga cuidado de no usar esta función en el modo de producción a menos que comprenda completamente sus implicaciones.
Aunque es posible ejecutar la aplicación fuera del telegrama, se recomienda desarrollarla dentro del telegrama para la representación más precisa de su funcionalidad del mundo real.
Para ejecutar la aplicación dentro de Telegram, @BotFather requiere un enlace HTTPS.
Esta plantilla ya proporciona una solución.
Para recuperar un enlace con el Protocolo HTTPS, considere usar el Script dev:https :
$ pnpm run dev:https
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
✓ Ready in 2.4s Visitar el enlace Local ( https://localhost:3000 en este ejemplo) En su navegador, verá la siguiente advertencia:
Esta advertencia del navegador es normal y puede ignorarse de manera segura siempre que el sitio esté seguro. Haga clic en el botón Proceed to localhost (unsafe) para continuar y ver la aplicación.
Una vez que la solicitud se muestra correctamente, envíe el enlace https://127.0.0.1:3000 ( https://localhost:3000 se considera inválido por Botfather) como el enlace de mini aplicación a @botfather. Luego, navegue a https://web.telegram.org/k/, busque su bot y inicie la aplicación Telegram Mini. Este enfoque proporciona la experiencia completa de desarrollo.
La forma más fácil de implementar su aplicación Next.js es usar la plataforma Vercel de los creadores de Next.js.
Consulte la documentación de implementación Next.js para obtener más detalles.
