In dieser Anleitung erfahren Sie, wie Sie mit dem Grammy SDK einen Telegram-Bot in einer Nextjs-Anwendung erstellen. Sie durchlaufen den Prozess der Einrichtung eines neuen Nextjs-Projekts und der Konfiguration von Grammy SDK mit Nextjs und erstellen Sie eine API-Route, um auf Benutzernachrichten zu reagieren
Voraussetzungen
Sie benötigen Folgendes:
- Nodejs 18 oder höher
Inhaltsverzeichnis
- Eine neue Nextjs-Anwendung erstellen
- Grammy SDK in Ihr Nextjs-Projekt integrieren
- Eine Telegram-Webhook-API-Route erstellen
- Auf Vercel bereitstellen
- API-Route als Telegram-Bot-Webhook festlegen
Erstellen Sie eine neue Nextjs-Anwendung
Beginnen wir mit der Erstellung eines neuen Nextjs-Projekts. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
npx create-next-app@latest my-app
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Ja“, wenn Sie aufgefordert werden, TypeScript zu verwenden
- „Nein“, wenn Sie aufgefordert werden, ESLint zu verwenden
- „Ja“, wenn Sie aufgefordert werden, Tailwind CSS zu verwenden
- „Nein“, wenn Sie aufgefordert werden, das Verzeichnis „src/“ zu verwenden
- „Ja“, wenn Sie aufgefordert werden, App Router zu verwenden
- „Nein“, wenn Sie aufgefordert werden, den Standard-Importalias („@/*“) anzupassen.
Sobald dies erledigt ist, wechseln Sie in das Projektverzeichnis und starten Sie die App im Entwicklungsmodus, indem Sie den folgenden Befehl ausführen:
cd my-app
npm run dev
Die App sollte auf localhost:3000 ausgeführt werden. Schließen wir nun den Entwicklungsserver, um das Grammy SDK zu installieren
Integrieren Sie das Grammy SDK in Ihr Nextjs-Projekt
Führen Sie zunächst den folgenden Befehl aus, um das Grammy SDK zu installieren:
- „grammy“: Ein Paket, das die Erstellung von Telegram-Bots erleichtert
npm install grammy
Führen Sie außerdem die folgende Code-Ergänzung in der Datei „nextconfigmjs“ durch, damit „grammy“ Nodejs-spezifische Funktionen im Nextjs App Router verwenden kann:
// File: next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: { // [!code ++]
serverComponentsExternalPackages: ['grammy'], // [!code ++]
}, // [!code ++]
}
export default nextConfig
Fahren wir nun mit der Erstellung einer API-Route fort, um mit dem Bot auf Benutzernachrichten zu antworten
Erstellen Sie eine Telegram-Webhook-API-Route
Um eine API-Route zu erstellen, die auf die POST-Anfrage von Telegram reagiert, um auf Benutzernachrichten zu reagieren, die mit Ihrem Bot interagieren, erstellen Sie eine Datei mit dem Namen „routets“ im Verzeichnis „app/api/bot“ mit dem folgenden Code:
// 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')
Der obige Code führt Folgendes aus:
– Stellt sicher, dass jede Anfrage dynamisch verarbeitet wird und Antworten nicht zwischengespeichert werden
- Importiert die Helfer „Bot“ und „webhookCallback“ aus dem Grammy SDK – Initialisiert eine Telegram Bot API kompatible Bot-Instanz – Exportiert den „webhookCallback“-Helfer unter Verwendung des Standard-HTTP-Anfrage- und Antwortmechanismus als Handler für eingehende „POST“-Anfragen
Nachdem dies erledigt ist, fahren wir mit der Bereitstellung der Anwendung fort
Auf Vercel bereitstellen
Der Code kann nun auf Vercel bereitgestellt werden. Führen Sie zur Bereitstellung die folgenden Schritte aus:
- Beginnen Sie mit der Erstellung eines GitHub-Repositorys, das den Code Ihrer App enthält
- Navigieren Sie dann zum Vercel-Dashboard und erstellen Sie ein Neues Projekt
- Verknüpfen Sie das neue Projekt mit dem GitHub-Repository, das Sie gerade erstellt haben
- Aktualisieren Sie in Einstellungen die Umgebungsvariablen so, dass sie mit denen in Ihrer lokalen „env“-Datei übereinstimmen
- Einsetzen! 🚀
Legen Sie die API-Route als Telegram Bot Webhook fest
Um Telegram so zu konfigurieren, dass es die Route „/api/bot“ aufruft, um auf Benutzerinteraktionen mit Ihrem Bot zu reagieren, führen Sie den folgenden Befehl aus, nachdem Sie ihn mit Ihrem Telegram-Bot-Token und Ihrer Vercel-Bereitstellungs-URL aktualisiert haben.
curl https://api.telegram.org/bot<telegram_bot_token>/setWebhook?url=https://<your-deployment.vercel>.app/api/bot
Abschluss
In diesem Leitfaden haben Sie gelernt, wie Sie das Grammy SDK integrieren, um Ihren eigenen Telegram Bot in Nextjs zu erstellen. Außerdem haben Sie gelernt, wie Sie den Telegram Bot auf Ihre benutzerdefinierte Bereitstellungs-URL verweisen, um mit dem Bot auf Benutzernachrichten zu antworten
Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.