我和AI在短短 7 天內，將一個簡單的想法落地為完整的產品。以下是關鍵的時間節點：
🔥 Phase 1: 核心基礎 (12/07 – 12/09)
- Day 1 (初始建置): 選定 Next.js 14 + Supabase 的現代化堆疊。完成了最困難的第一步：資料庫設計。我們決定新聞來源不只是單純的文字，還要有「AI 觀點」。
- Day 2 (自動化引擎): 寫出了第一版爬蟲 (Cheerio)。這時遇到的第一個挑戰是 「如何去重」（避免抓到重複新聞），我們學會了用 URL Hash 或 Slug 來做唯一索引。
- Day 3 (品牌與電子報): 網站也要有 “Face”。我們引入了 Resend 來發送電子報，並確立了玻璃擬態 (Glassmorphism) 的設計風格。
🚀 Phase 2: 功能爆發 (12/10 – 12/12)
- Day 4 (AI 導讀): 單純看新聞太無聊，我們加入了 ChatBox。這裡的技術點在於 Streaming UI，讓 AI 的回答像打字機一樣流暢出現，而不是讓使用者乾等 5 秒。
- Day 5 (搜尋與 SEO): 隨著文章變多，我們補上了全站搜尋與 Sitemap。這時我們學到了 Dynamic Rendering 的重要性，否則爬蟲抓不到最新資料。
- Day 6 (行動版優化): 發現 70% 流量來自手機。我們實作了 PWA (可安裝到主畫面) 和 Pull-to-Refresh (下拉更新)，讓網站用起來像原生 App。
💎 Phase 3: 畫龍點睛 (12/13 – 12/14)
- Day 7 (語音與數據):
- TTS (Text-to-Speech): 整合 OpenAI 把新聞「唸」出來。
- 短網址: 為了解決分享連結太醜的問題，實作了 NanoID。
- GA4: 最後補上了數據分析，完成閉環。
💡 關鍵技術決策 (Why we chose these?)
1. Next.js App Router: 雖然學習曲線陡峭，但它的 Server Component 對於 SEO 和電子報生成非常方便。
2. Supabase (BaaS): 省去了維護後端 API Server 的時間。它的 Row Level Security (RLS) 讓我們前端能直接安全地讀取資料庫。
3. Vercel Cron Jobs: 不需要架設複雜的 Linux Server 來跑排程，只要寫一個 API，Vercel 就會定時去戳它，非常適合輕量級爬蟲。
⚠️ 踩坑筆記：那些我們犯過的錯 (Lessons Learned)
這週並非一帆風順，以下是幾個血淚經驗，希望能幫你少走彎路：
1. 忽略了 `package.json`的提交
- 狀況: 在本地安裝了新套件 (如 `@next/third-parties`) 跑得很順，推上雲端卻直接 Build Failed。
- 原因: 因為 `.gitignore` 沒有設好或者漏看 `git status`，忘了把 `package.json` 和 `package-lock.json` 推上去。
- 教訓: 每次安裝新套件後，第一件事就是 Commit `package.json`。
2. 資料庫 Migration 的混亂
- 狀況: 我們有時候直接在 Supabase 網頁後台加欄位 (如 `audio_url`)，有時候又寫 SQL 檔案。導致後來要同步環境時很混亂。
- 教訓: 最好統一流程。如果是小專案，直接操作 Dashboard 沒關係，但記得定期用 `supabase db dump` 備份結構。
3. 手機觸控事件的坑
- 狀況: 在電腦瀏覽器模擬手機下拉更新很正常，但實機操作時，瀏覽器原本的「重新整理」會跟我們的「下拉更新」打架。
- 教訓: 開發 Mobile Web 時，一定要用實機測試。我們後來加了 `e.preventDefault()` 和檢查 `window.scrollY === 0` 才解決這個衝突。
4. 環境變數沒生效
- 狀況: 改了 GA ID 卻一直沒看到數據。
- 原因: Next.js 的 `NEXT_PUBLIC_` 變數是在 Build Time 寫死的。改了變數後，必須 Redeploy (重新建置) 才會生效，光重啟 Server 是沒用的。
🎯 結語
從這 7 天的旅程可以看出，現代化 Web 開發的速度之快令人驚嘆。有了 AI 輔助寫 code，我們不再被瑣碎的語法卡住，而是更能專注在「產品邏輯」與「使用者體驗」上。
智流Smart Flow 接下來還會繼續進化（多語言、個人化推薦…），敬請期待！
智流 Smart Flow – 全球科技快報 https://ai-smart-flow.vercel.app/
> “Code is easy, Logic is hard. AI helps with the easy part so we can focus on the hard part.”
—
Created by Smart Flow Team with AI Assistant / 2025-12-14
