系列文章
營養師不開菜單的第十一天 - NextAuth 開箱即用的身分驗證套件
NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式，我們就不需要編寫繁...
營養師不開菜單的第十二天 - OAuth 權限申請：Facebook、Twitter、Google 及 Github
昨天介紹完 NextAuth.js 的基本設置，但我們還需要取得第三方驗證廠商的 ID 及金鑰，每個提供者的申請方式不同，有複雜也有簡單。在 NextAuth...
營養師不開菜單的第十三天 - 不需要 React Provider 管理狀態的 Zustand
吃水果好麻煩，買來之後洗完還要削皮去籽再切一切，但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好？在使用 Redux 跟 Context API 的...
營養師不開菜單的第十四天 - 為什麼要用 React-Beautiful-Dnd 做拖曳效果
React-Beautiful-DnD 是由 Atlassian 開發，也就是 Trello、Slack、Jira 的母公司，但這邊要澄清一下，雖然 Trel...
營養師不開菜單的第十五天 - 為什麼從 Formik 跳槽到 React-Hook-Form
React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...
營養師不開菜單的第十六天 - TypeScript 不夠？使用 Zod 做型別驗證
在上篇文章中，我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具，就像人體的免疫系統，確保資料結構在...
營養師不開菜單的第十七天 - 在 Next.js 中使用 Cloudinary CDN 管理媒體資源
Cloudinary 是一個雲端媒體管理平台，主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務，可以藉由平台上傳、儲存及管理資源，並且讓媒體資源在不...
營養師不開菜單的第十八天 - 使用 React-Hot-Toast 實現各種狀態通知
react-hot-toast 是一個專為 React 設計的輕量級通知提示（toast）套件。預設有成功、失敗、loading(Promise) 三種類型的...
營養師不開菜單的第十九天 - Next.js 實作 - Link In Bio Tool 畫面設計與整體規劃
前言 在前15篇章節中，已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品，我...
營養師不開菜單的第二十天 - Next.js 後端實戰 - Model 與 API
前言 在設計完畫面後，也大概確認了整個專案的頁面功能，在設置完資料夾結構後，就是進入前端後端實作的階段，大部分的頁面我是前後端功能同步進行，但為了避免畫面凌亂，...