在 Telegram 生態開發過程中，許多開發者都會遇到一個共同的痛點：如何同時管理 Bot 和 Mini App 兩套程式碼？ 傳統做法是分開部署兩個專案，不僅增加了維護成本，還容易在資料同步和支付流程中出現問題。
本文將為你展示一種全新的開發思路：用一個 Next.js 專案同時實現 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 前端拆分，使用微服務架構和專門的消息隊列處理高併發。
大綱
 (1) (1).png)
