Cree un bot de Telegram en el enrutador de aplicaciones Next.js: una guía paso a paso

En esta guía, aprenderá cómo usar Grammy SDK para crear un bot de Telegram en una aplicación Nextjs. Pasará por el proceso de configurar un nuevo proyecto Nextjs y configurar Grammy. SDK con Nextjs y crear una ruta API para responder a los mensajes de los usuarios

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación Nextjs
Integra Grammy SDK en tu proyecto Nextjs
[Crear una ruta API de Telegram Webhook] (#create-a-telegram-webhook-api-route)
Implementar en Vercel
Establecer la ruta API como webhook de Telegram Bot

Crea una nueva aplicación Nextjs

Comencemos creando un nuevo proyecto Nextjs. Abra su terminal y ejecute el siguiente comando:

npx create-next-app@latest my-app

Cuando se le solicite, elija:

Sí cuando se le solicite usar TypeScript
No cuando se le solicita usar ESLint
Sí cuando se le solicite usar Tailwind CSS
No cuando se le solicita usar el directorio src/
Sí cuando se le solicite usar App Router
No cuando se le solicite personalizar el alias de importación predeterminado (@/*)

Una vez hecho esto, vaya al directorio del proyecto e inicie la aplicación en modo de desarrollo ejecutando el siguiente comando:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:3000 Ahora, cerremos el servidor de desarrollo para instalar Grammy SDK.

Integra Grammy SDK en tu proyecto Nextjs

Primero, ejecute el siguiente comando para instalar el SDK de Grammy:

grammy: un paquete que facilita la creación de bots de Telegram

npm install grammy

Además, realice la siguiente adición de código en el archivo nextconfigmjs para permitir que grammy use funciones específicas de Nodejs en Nextjs App Router:

// File: next.config.mjs // [!code focus]

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { // [!code ++] // [!code focus]
    serverComponentsExternalPackages: ['grammy'], // [!code ++] // [!code focus]
  }, // [!code ++] // [!code focus]
}

export default nextConfig

Ahora, pasemos a crear una ruta API para responder a los mensajes de los usuarios con el bot.

Crear una ruta API de webhook de Telegram

Para crear una ruta API que responda a la solicitud POST de Telegram para responder a los mensajes de los usuarios que interactúan con su bot, cree un archivo llamado routets en el directorio app/api/bot con el siguiente código:

export const dynamic = 'force-dynamic'

export const fetchCache = 'force-no-store'

import { Bot, webhookCallback } from 'grammy'

const token = process.env.TELEGRAM_BOT_TOKEN

if (!token) throw new Error('TELEGRAM_BOT_TOKEN environment variable not found.')

const bot = new Bot(token)
bot.on('message:text', async (ctx) => {
  await ctx.reply(ctx.message.text)
})

export const POST = webhookCallback(bot, 'std/http')

El código anterior hace lo siguiente:

Se asegura de que cada solicitud se procese dinámicamente y las respuestas no se almacenen en caché
Importa los ayudantes Bot y webhookCallback del SDK de Grammy
Inicializa una instancia de bot compatible con Telegram Bot API
Exporta el asistente webhookCallback basándose en el mecanismo de solicitud y respuesta HTTP estándar como controlador de solicitudes entrantes POST

Una vez hecho esto, pasemos a implementar la aplicación.

Implementar en Vercel

El código ahora está listo para implementarse en Vercel. Utilice los siguientes pasos para implementarlo:

Comience creando un repositorio de GitHub que contenga el código de su aplicación.
Luego, navegue hasta el Panel de Vercel y cree un Nuevo proyecto
Vincula el nuevo proyecto al repositorio de GitHub que acabas de crear
En Configuración, actualice las Variables de entorno para que coincidan con las de su archivo env local
¡Desplegar! 🚀

Establecer la ruta API como webhook de Telegram Bot

Para configurar Telegram para invocar la ruta /api/bot para responder a las interacciones del usuario con su bot, ejecute el siguiente comando después de actualizarlo con su Telegram Bot Token y Vercel Deployment URL

curl https://api.telegram.org/bot<telegram_bot_token>/setWebhook?url=https://<your-deployment.vercel>.app/api/bot

Conclusión

En esta guía, aprendió cómo integrar Grammy SDK para crear su propio Telegram Bot en Nextjs. Además, aprendió cómo apuntar Telegram Bot a su URL de implementación personalizada para responder a los mensajes de los usuarios con el bot.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter