在 Telegram 生态开发过程中，许多开发者都会遇到一个共同的痛点：如何同时管理 Bot 和 Mini App 两套代码？ 传统做法是分开部署两个项目，不仅增加了维护成本，还容易在数据同步和支付流程中出现问题。
本文将为你展示一种全新的开发思路：用一个 Next.js 5 项目同时实现 Telegram Bot 和 Mini App，真正做到一套代码、一次部署、无缝集成。你将学会如何搭建一个完整的积分游戏系统，包含每日签到奖励、Telegram Stars 真实支付和实时通知功能。
传统模式下，开发者需要：
而使用 Next.js 一体化方案，你可以：
这种方式特别适合快速验证想法、开发 MVP 产品或独立开发者快速上线项目。
我们将构建一个积分游戏系统，具备以下功能：
/start、/help 等常用命令，一键启动 Mini App整个系统运行在一个 Next.js 应用中，Bot 和 Mini App 的交互完全无缝。
在正式开发前，你需要准备以下工具：
ngrok config add-authtoken <你的token> 绑定账户ngrok http 3000你可以从相关 Telegram 频道获取完整源码和详细文档（具体链接可在原视频描述中找到）。
git clone <项目仓库地址>
cd <项目目录>
npm install
在项目根目录创建 .env.local 文件，用于存储敏感信息：
TELEGRAM_BOT_TOKEN=你的Bot令牌
NEXT_PUBLIC_APP_URL=你的Ngrok地址
重要提示：确保 .env.local 已加入 .gitignore，避免泄露 Bot Token。
/newbot 创建新 Botbot 结尾）.env.local# 终端 1：启动 Ngrok
ngrok http 3000
# 终端 2：启动 Next.js 开发服务器
npm run dev
# 终端 3：设置 Webhook
npm run webhook:setup
如果一切正常，你会看到 "Webhook set successfully" 的提示。
/mybots 选择你的 Bot现在，用户打开你的 Bot 时，会看到一个启动游戏的按钮，点击即可进入 Mini App 界面！
所有 Telegram 发送的更新（用户指令、支付回调等）都会通过 Webhook 传递到 /api/telegram/webhook 路由。
主要处理的消息类型包括：
/start、/help 等当用户首次发送 /start 时，Bot 会立即推送一个「启动游戏」按钮，无需额外引导。
支付功能的核心在于 /api/buy-points 路由：
createInvoiceLink）关键配置：
provider_token 留空（Telegram Stars 模式）currency 设为 XTRprices 单位为星星数量（非分）开发者福利：每次购买后会返回收据 ID，你可以立即用 /refund <收据ID> 测试退款，无需等待审核或人工处理。这对于测试真实支付流程极为高效。
在 /api/claim-daily 路由中，我们实现了基于时间的激励机制：
前端使用 实时倒计时组件，每秒更新剩余时间，让用户清楚知道何时可以再次领取。这种模式可以扩展到任何需要时间限制的游戏玩法（如能量恢复、抽奖冷却等）。
虽然本文使用内存存储进行演示，但真实项目上线前必须做以下改造：
部署平台推荐：
部署时记得更新 Webhook URL 和 Mini App 菜单链接 为生产域名。
Telegram 的 Webhook 和 Mini App 都要求使用 HTTPS 协议，localhost 无法满足这一要求。Ngrok 可以创建一个公网可访问的 HTTPS 隧道，将请求转发到你的本地开发服务器。
在开发阶段，你可以购买少量 Telegram Stars（最低几毛钱），然后使用 /refund 指令立即退款。这样可以用真实流程测试支付、Webhook 回调和退款逻辑，无需反复充值。
绝对不行。内存存储在服务器重启后会丢失所有数据。必须使用持久化数据库（如 PostgreSQL），并做好备份和迁移方案。
最大优势是开发效率和维护成本的降低。你不需要：
所有逻辑都在一个项目中，代码复用率高，Bug 定位更快。
对于 MVP 产品和中小型应用完全够用。如果日活用户达到百万级别，建议将 Bot 后端和 Mini App 前端拆分，使用微服务架构和专门的消息队列处理高并发。
大纲
