ONIGIRI常駐監工
VOL. 022024
OFFICIAL SITE SAGA — 2024 | Haru Li
LIVE PREVIEW
DETAIL
問題
官網原本是 Astro + React 的混合架構，兩套渲染方式並存讓 SSR / SSG 的邊界難以維護。同時要新增多步驟驗屋預約與線上付款流程。
做法
主導前端架構遷移，重構為 Next.js 14 App Router 並統一 SSR / SSG 渲染策略。與後端協作開發多步驟驗屋預約系統（Step 1–5），涵蓋報價試算、日期選擇、聯絡資訊填寫至確認下單的完整流程。串接 TapPay 金流 SDK 實作信用卡線上付款，整合 LINE LIFF 實作 LINE 登入，並配置 GA4 電商事件追蹤（add_to_cart、begin_checkout、purchase）。
結果
架構遷移完成，渲染策略收斂為單一套。部署於 GCP + Docker，並以 Nginx 配置靜態資源快取。
TECH STACK //
Next.js 14ReactTypeScriptTapPayLINE LIFFGA4GTMDockerGCPNginx