Create a Telegram Bot in Next.js App Router
LaunchFast LogoLaunchFast
Dirstarter logo

Dirstarter – Next.js Directory Template

Build, monetize, and scale directories with Next.js.

Ad
Blog
ENDEES
688 words4 min read

Create a Telegram Bot in Next.js App Router

How to create a Telegram bot in a Next.js App Router application using the Grammy SDK?

Rishi Raj Jain
Rishi Raj JainAuthor

In this guide, you will learn how to use the Grammy SDK to create a Telegram bot in a Next.js application. You will go through the process of setting up a new Next.js project, configuring Grammy SDK with Next.js, and creating an API route to respond to user messages.

Prerequisites

You’ll need the following:

Table Of Contents

Create a new Next.js application

Let’s get started by creating a new Next.js project. Open your terminal and run the following command:

Terminal window
npx create-next-app@latest my-app

When prompted, choose:

Once that is done, move into the project directory and start the app in development mode by executing the following command:

Terminal window
cd my-app
npm run dev

The app should be running on localhost:3000. Now, let’s close the development server to install Grammy SDK.

Integrate Grammy SDK in your Next.js project

First, run the following command to install the Grammy SDK:

Terminal window
npm install grammy

Further, perform the following code addition in next.config.mjs file to allow grammy to use Node.js specific features in Next.js App Router:

// 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

Now, let’s move on to creating an API route to respond to user messages with the bot.

Create a Telegram Webhook API Route

To create an API route that responds to the POST request by Telegram to respond to user messages interacting with your bot, create a file named route.ts in the app/api/bot directory with the following 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')

The code above does the following:

With that done, let’s move on to deploying the application.

Deploy to Vercel

The code is now ready to deploy to Vercel. Use the following steps to deploy:

Set the API Route as Telegram Bot Webhook

To configure Telegram to invoke the /api/bot route to respond to user interactions with your bot, run the following command after updating it with your Telegram Bot Token and Vercel Deployment URL.

Terminal window
curl https://api.telegram.org/bot<telegram_bot_token>/setWebhook?url=https://<your-deployment.vercel>.app/api/bot

Conclusion

In this guide, you learned how to integrate Grammy SDK to create your own Telegram Bot in Next.js. Further, you learnt how to point the Telegram bot to your custom deployment URL to respond to user messages with the bot.

If you have any questions or comments, feel free to reach out to me on Twitter.

Continue reading