前兩天我們完成了聊天機器人的 前端畫面 與 互動功能。

今天的目標是：在 Next.js 專案裡建立 後端 API Route，讓前端可以呼叫 Gemini API 取得智慧回覆。

⚠️ 注意事項

• 如果你的 Gemini API Key 尚未啟用或無效，測試時可能會看到「⚠️ 無法取得回覆」
• 請先到 Google Cloud Console 確認 API Key 是否啟用 Generative Language API

1️⃣ 建立 API Route

在 Next.js 專案中，app/api/ 資料夾下的檔案會自動成為 API 端點。

建立一個新的 API Route，主要功能包括：

1. 接收前端訊息
   • 前端會傳送所有聊天紀錄（messages）。
   • 後端取最後一則訊息作為使用者輸入。
2. 呼叫 Gemini API
   • 使用後端的 API Key 透過 HTTP POST 請求傳給 Gemini。
   • 告訴 Gemini 使用者輸入的文字，請求生成回覆。
3. 回傳結果給前端
   • 從 Gemini 回應中取出文字內容並回傳。
   • 如果 API 無回覆或 Key 無效，就回傳預設提示 "⚠️ 無法取得回覆"。

2️⃣ 環境變數設定

在 .env.local 檔案裡放上你的 API Key：

GEMINI_API_KEY=你的GeminiAPI金鑰

注意：這個金鑰只在後端使用，前端看不到，安全性更高。

3️⃣ 測試 API

啟動專案後，可以用 Postman 或 curl 來測試 API：

• 成功範例：API 回傳使用者輸入的智慧回覆
• Key 無效或未啟用範例：API 回傳 "⚠️ 無法取得回覆"

今天我們完成了 後端 API Route，概念上就是：

• 前端呼叫後端 API
• 後端代為呼叫 Gemini 並取得回覆
• 回傳結果給前端顯示

這樣一來前端不用直接接觸 API Key，安全性更高。