Get Telegram Notifications from Your Next.js App in Minutes

Want to get real-time notifications from your website directly in Telegram? Whether it’s contact form submissions, system alerts, or user activity, using a Telegram bot is a simple and effective solution. Here’s how to set it up with Next.js.

---

Create a Telegram Bot

• Open Telegram and search @botfather.

• Type /newbot and follow the instructions.

• Save the Bot Token provided.

Get your Chat ID:

• Personal chat: Send a message to your bot, then visit:
  https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates

• Group chat: Add the bot to a group, send a message, and use the same URL.

Set Up a Next.js API Route

Create a server-side endpoint to send messages via the bot.

// pages/api/notify.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ message: 'Method not allowed' });

  const { name, email, message } = req.body;
  const botToken = process.env.TELEGRAM_BOT_TOKEN;
  const chatId = process.env.TELEGRAM_CHAT_ID;

  try {
    const response = await axios.post(`https://api.telegram.org/bot${botToken}/sendMessage`, {
      chat_id: chatId,
      text: `New message:\nName: ${name}\nEmail: ${email}\nMessage: ${message}`,
    });
    res.status(200).json({ success: response.data.ok });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false });
  }
}

Store TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in .env.local.

Create a Contact Form

"use client";
import { useState } from 'react';
import axios from 'axios';

export default function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', message: '' });

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('/api/notify', form);
      alert(res.data.success ? 'Message sent!' : 'Failed to send message.');
      if (res.data.success) setForm({ name: '', email: '', message: '' });
    } catch {
      alert('Error sending message.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={form.email} onChange={handleChange} placeholder="Email" type="email" required />
      <textarea name="message" value={form.message} onChange={handleChange} placeholder="Message" required />
      <button type="submit">Send</button>
    </form>
  );
}

Deploy and Test

• Add your environment variables in production.

• Submit the form — messages appear instantly in Telegram.

✅ Why This Works

• Real-time updates: No need to constantly check your backend.

• Lightweight: No complex notification system required.

• Flexible: Works for personal or group chats.

Now your Next.js app can send instant notifications directly to Telegram, keeping you informed wherever you are. 🚀