區域觀察
房地產個人品牌官網｜V1.0 專案全程復盤(中)
從需求規劃、前後台架構到正式部署上線，完整記錄我的房地產個人品牌官網 V1.0 建置歷程。
重點摘要
從房仲實際工作需求出發，建立可公開瀏覽房源、閱讀市場文章與線上聯絡的個人品牌官網。 網站採 Next.js + Supabase + Vercel 架構，並建立自製管理後台。 本文完整記錄從需求定義、技術選型、本機開發到 Production 正式部署的實務歷程。
我並非是有技術底的程式設計軟體工程師，充其量只能說是有一些使用網站的概念而已。 在網站的技術架構確定之後，我們( 我與 AI )接著建立整個網站 Route。 第三階段：建立網站骨架 這一步其實是在蓋：整棟房子( 網站 )的結構體。 頁面還不一定有真正資料，但是網站導航與責任邊界已經建立。 包括：Public 與 Admin 的相關路由。 第四階段：前端 UI／UX 大量施工 這一段花了不少時間，因為我對實際使用感非常重視。 不是套一個模板就算了，而是不斷調整，最後形成網站現在的視覺。 施工期間處理過： Sticky Header、字級、桌機版、窄版、手機版、首頁 Hero、卡片 Hover、服務區域、Footer、CTA、房源清單、房源詳情、圖片輪播、縮圖、上一張／下一張、圖片計數、土地／住宅／工業不同資料欄位。 所以這一段不只是「CSS」，其實是在建立：常月玲房地產個人品牌的視覺語言。 第五階段：用 Mock Data 模擬真正營運 這是很重要的一步。我們並沒有一開始就碰 Production Database。 而是先建立：src/data/mock 然後模擬真正網站會有的資料。 當時還做了約 18 筆房源情境，確認： 首頁數量、分類頁、房源詳情、服務區域、文章、後台列表等 UI，在「有真實資料量」時仍然正常。 這讓我們可以先把：UI 與資料結構，驗證完成，再接真正資料庫。 到這裡都是在本機 DEMO 環境下的測試，一切都很正常。 接下來就進入「深水區」。 許多人用 AI 編程，在自己的電腦運作都能正常，部署上線之後會變了樣，就是在接下來的環節出了差錯。