--- title: "Erstellen Sie einen Telegram-Bot im Next.js App Router" description: "Wie verwende ich Unplugin-Symbole in der Next.js-Anwendung?" source: "https://www.launchfa.st/de/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. Create a Telegram Bot in Next.js In dieser Anleitung erfahren Sie, wie Sie mit dem [Grammy SDK](https://github.com/grammyjs/grammY) 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](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher ## Inhaltsverzeichnis - [Eine neue Nextjs-Anwendung erstellen](#create-a-new-nextjs-application) - [Grammy SDK in Ihr Nextjs-Projekt integrieren](#integrate-grammy-sdk-in-your-nextjs-project) - [Eine Telegram-Webhook-API-Route erstellen](#create-a-telegram-webhook-api-route) - [Auf Vercel bereitstellen](#deploy-to-vercel) - [API-Route als Telegram-Bot-Webhook festlegen](#set-the-api-route-as-telegram-bot-webhook) ## 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: ```bash 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: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:3000](http://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 ```bash 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: ```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 ``` 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: ```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') ``` 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](https://coretelegramorg/bots/api#making-requests) 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. ```bash curl https://api.telegram.org/bot/setWebhook?url=https://.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](https://twitter.com/direct_messages/create/rishi_raj_jain_).