區域觀察
房地產個人品牌官網｜V1.0 專案全程復盤(上)
從需求規劃、前後台架構到正式部署上線，完整記錄我的房地產個人品牌官網 V1.0 建置歷程。
重點摘要
從房仲實際工作需求出發，建立可公開瀏覽房源、閱讀市場文章與線上聯絡的個人品牌官網。 網站採 Next.js + Supabase + Vercel 架構，並建立自製管理後台。 本文完整記錄從需求定義、技術選型、本機開發到 Production 正式部署的實務歷程。
我想做一個房地產的網站，能在公網發布，
用戶可以透過網址，找到我發布的房源訊息，
進而透過網站的線上按鈕留言或是在線下打電話。
還需要有一個管理後台，可以新增/修改/刪除 網站上的資訊。
請幫我生成一個「單一 HTML 檔案」的房地產網站視覺原型，讓我可以直接在瀏覽器打開看效果。
在 GPT 模型下的這一段提示詞，開啟了我的個人品牌官網 V1.0 的征程。
第一階段：先決定「到底要做什麼」
最開始，並沒有急著寫程式，而是先把產品定位講清楚。
我的需求其實很明確：
做一個真正可以放到公網上的房地產個人品牌官網。
客戶可以透過網址：
找到我 → 看房源 → 看土地／住宅資訊 → 看房市文章 → 認識我的專業 → 留言或聯絡我。
而我自己則需要：
管理後台 → 新增／修改／刪除房源 → 管理文章 → 管理服務區域 → 看客戶留言 → 管理網站資料。
這時定下第一個重要架構：
前台官網 + `/admin` 自製管理後台 + BaaS。
而不是 WordPress，也不是傳統自己養一整台 Server。
第二階段：技術架構定案
接下來就進入技術棧的決策。
Next.js：負責前台與管理後台。
Supabase：負責 Database、Auth、Storage、RLS。
Vercel：負責網站 Production Hosting、CDN、Edge、DDoS 基礎防護、Firewall。
本機：為真正的開發環境。
這裡有一個重要觀念：網站不是直接在 Vercel 上開發。
先在本機施工，再把完成的版本部署到 Production。
這也是許多人用 AI 編程，DEMO 時都很正常，部署上線之後就變了樣。