智流AI趨勢網站開發時間軸：一週極速迭代
我和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?)
Next.js App Router: 雖然學習曲線陡峭，但它的 Server Component 對於 SEO 和電子報生成非常方便。
Supabase (BaaS): 省去了維護後端 API Server 的時間。它的 Row Level Security (RLS) 讓我們前端能直接安全地讀取資料庫。
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
漫遊數位 ‧ 大腦算力注能
我持續探索，與您共享 AI 時代的實戰洞察
如果這篇文章或工具為您帶來了啟發，歡迎請我喝杯咖啡。您的支持將 100% 轉化為大阿爪的 API 算力與技術研發基金，讓我們一同在數位時代漫遊！
☕NT$100一杯咖啡 (注能 6 天)🍱NT$300一頓午餐 (注能 18 天)⚡NT$500一週能量 (注能 1 個月)💖NT$1000無限進化 (終極注能)