clear flow / typed boundary / repeatable checks
我不喜歡讓單一 Component 承擔太多責任。當邏輯、UI、資料取得與副作用混在一起，後續每次修改都會變成賭運氣。
嚴格遵守單向資料流，避免將 Hook 當作 Prop 傳遞，以維護架構的純粹性。
配置完善的 CI/CD 流程，確保每一行進入主分支的程式碼都符合品質標準。
我寫文章不是為了整理名詞，而是把實務上遇過的混亂場景拆開：資料流不清、狀態責任混在一起、測試缺口、安全邊界模糊、SEO 與效能取捨。這些問題通常不會第一天爆炸，但會在產品長期維護時慢慢變成成本。
整理我在前端架構、狀態管理、Next.js 與工程品質上的實作筆記。文章保留問題脈絡，也記錄取捨與踩坑後的修正。
日常主要圍繞 Next.js、React、TypeScript、Testing 與 Security，並依照需求搭配狀態管理、UI 系統與 CI/CD。
我喜歡把抽象的前端問題拆成可維護的結構，也樂於把實作過程整理成文章。若你想交流 React、Next.js、工程品質或內容型網站架構，可以從這裡找到我。
曾在大型既有專案中處理狀態來源混亂、資料流不清楚與元件耦合問題，透過 Custom Hooks、TanStack Query 與 Zustand 職責切分，讓資料取得、快取與 UI 狀態更容易追蹤。
在專案中導入 ESLint、TypeScript 檢查、Vitest 單元測試與 Playwright E2E，把容易靠人工遺漏的流程轉成可重複驗證的檢查。
處理過 metadata、sitemap、revalidate 與圖片最佳化等議題，讓內容型網站在搜尋可見度、載入速度與快取更新之間取得平衡。
實作過 CSP nonce、登入狀態檢查、Route Handler 權限驗證與 DAL 分層，避免敏感邏輯直接暴露在 Client Component。
介紹 TanStack Query useQuery 的 enabled 設定與實務應用：以 Hover TabItemFlyout 為例說明如何延遲查詢、利用快取與 staleTime 避免多餘的 API 請求，並示範常見錯誤與正確做法。
TanStack Query Devtools 教學，介紹如何在 React 與 Next.js App Router 中安裝與使用 Devtools，並透過 query key、mutation key、cache data、staleTime、gcTime、mutation invalidate 等實戰情境理解 TanStack Query 的除錯方式。
整理 Zustand 常見反模式，說明哪些狀態不適合放進 Store，包括 API response、表單狀態、全域 loading、persist 濫用與 Next.js App Router 使用邊界。
介紹 Next.js App Router 中 Middleware、DAL、Server Actions 與 Route Handlers 的權限分層設計，說明為什麼不能只靠 Middleware 做授權控管。
