---
title: "Cree un bot de Telegram en el enrutador de aplicaciones Next.js: una guía paso a paso"
description: "¿Cómo utilizar los iconos Unplugin en la aplicación Next.js?"
source: "https://www.launchfa.st/es/blog/telegram-nextjs-app-router"
author: "Rishi Raj Jain"
created_at: 2024-07-03T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
En esta guía, aprenderá cómo usar [Grammy SDK](https://github.com/grammyjs/grammY) 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](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Nextjs](#crear-una-nueva-aplicación-nextjs)
- [Integra Grammy SDK en tu proyecto Nextjs](#integrate-grammy-sdk-in-your-nextjs-project)
- [Crear una ruta API de Telegram Webhook] (#create-a-telegram-webhook-api-route)
- [Implementar en Vercel](#implementar-en-vercel)
- [Establecer la ruta API como webhook de Telegram Bot](#set-the-api-route-as-telegram-bot-webhook)
## Crea una nueva aplicación Nextjs
Comencemos creando un nuevo proyecto Nextjs. Abra su terminal y ejecute el siguiente comando:
```bash
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:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:3000](http://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
```bash
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:
```tsx
// 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:
```tsx
// File: app/api/bot/route.ts
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](https://coretelegramorg/bots/api#making-requests)
- 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**
```bash
curl https://api.telegram.org/bot/setWebhook?url=https://.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](https://twitter.com/direct_messages/create/rishi_raj_jain_)