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

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

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

Rishi Raj Jain
Create a Telegram Bot in Next.js

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

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

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:

Terminal window
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:

Terminal window
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
Terminal window
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:

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.

Terminal window
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.

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024