你是否對營養師的刻板印象還停留在開減肥菜單?但是這次營養師不開菜單了,要用 Next.js 13 寫全端。
本次的參賽 Project 將以 Next.js 13 實作一個 Link in Bio Tool 自介多連結工具的全端專案,包括前台及後台頁面。可以針對個人或品牌建立具有多個連結的頁面,當訪客進入頁面即可看到所有你希望他們點擊的連結。
30 天的系列文將從專案的整體介紹開始,深入到專案的架構,再到具體的 Next.js 使用方法,以及各種套件的介紹和實際應用。系列文還將探討細節的實作方法、如何部署專案以及後續的優化技巧。
NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式,我們就不需要編寫繁...
昨天介紹完 NextAuth.js 的基本設置,但我們還需要取得第三方驗證廠商的 ID 及金鑰,每個提供者的申請方式不同,有複雜也有簡單。在 NextAuth...
吃水果好麻煩,買來之後洗完還要削皮去籽再切一切,但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好?在使用 Redux 跟 Context API 的...
React-Beautiful-DnD 是由 Atlassian 開發,也就是 Trello、Slack、Jira 的母公司,但這邊要澄清一下,雖然 Trel...
React-Hook-Form 是一個輕量的 React 表單驗證和管理套件,核心是運用 React Hooks API 來進行管理狀態和表單操作,讓 Rea...
在上篇文章中,我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具,就像人體的免疫系統,確保資料結構在...
Cloudinary 是一個雲端媒體管理平台,主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務,可以藉由平台上傳、儲存及管理資源,並且讓媒體資源在不...
react-hot-toast 是一個專為 React 設計的輕量級通知提示(toast)套件。預設有成功、失敗、loading(Promise) 三種類型的...
前言 在前15篇章節中,已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品,我...
前言 在設計完畫面後,也大概確認了整個專案的頁面功能,在設置完資料夾結構後,就是進入前端後端實作的階段,大部分的頁面我是前後端功能同步進行,但為了避免畫面凌亂,...