Erstellen Sie einen Telegram-Bot im Next.js App Router: Eine Schritt-für-Schritt-Anleitung

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 // [!code focus]

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

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:

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.