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

expor...

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. 🚀