iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

營養師不開菜單要用 Next.js 13 寫全端 系列

你是否對營養師的刻板印象還停留在開減肥菜單?但是這次營養師不開菜單了,要用 Next.js 13 寫全端。
本次的參賽 Project 將以 Next.js 13 實作一個 Link in Bio Tool 自介多連結工具的全端專案,包括前台及後台頁面。可以針對個人或品牌建立具有多個連結的頁面,當訪客進入頁面即可看到所有你希望他們點擊的連結。
30 天的系列文將從專案的整體介紹開始,深入到專案的架構,再到具體的 Next.js 使用方法,以及各種套件的介紹和實際應用。系列文還將探討細節的實作方法、如何部署專案以及後續的優化技巧。

鐵人鍊成 | 共 30 篇文章 | 39 人訂閱 訂閱系列文 RSS系列文 團隊所以隊名要叫什麼
DAY 11

營養師不開菜單的第十一天 - NextAuth 開箱即用的身分驗證套件

NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式,我們就不需要編寫繁...

2023-09-26 ‧ 由 ysl0628 分享
DAY 12

營養師不開菜單的第十二天 - OAuth 權限申請:Facebook、Twitter、Google 及 Github

昨天介紹完 NextAuth.js 的基本設置,但我們還需要取得第三方驗證廠商的 ID 及金鑰,每個提供者的申請方式不同,有複雜也有簡單。在 NextAuth...

2023-09-27 ‧ 由 ysl0628 分享
DAY 13

營養師不開菜單的第十三天 - 不需要 React Provider 管理狀態的 Zustand

吃水果好麻煩,買來之後洗完還要削皮去籽再切一切,但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好?在使用 Redux 跟 Context API 的...

2023-09-28 ‧ 由 ysl0628 分享
DAY 14

營養師不開菜單的第十四天 - 為什麼要用 React-Beautiful-Dnd 做拖曳效果

React-Beautiful-DnD 是由 Atlassian 開發,也就是 Trello、Slack、Jira 的母公司,但這邊要澄清一下,雖然 Trel...

2023-09-29 ‧ 由 ysl0628 分享
DAY 15

營養師不開菜單的第十五天 - 為什麼從 Formik 跳槽到 React-Hook-Form

React-Hook-Form 是一個輕量的 React 表單驗證和管理套件,核心是運用 React Hooks API 來進行管理狀態和表單操作,讓 Rea...

2023-09-30 ‧ 由 ysl0628 分享
DAY 16

營養師不開菜單的第十六天 - TypeScript 不夠?使用 Zod 做型別驗證

在上篇文章中,我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具,就像人體的免疫系統,確保資料結構在...

2023-10-01 ‧ 由 ysl0628 分享
DAY 17

營養師不開菜單的第十七天 - 在 Next.js 中使用 Cloudinary CDN 管理媒體資源

Cloudinary 是一個雲端媒體管理平台,主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務,可以藉由平台上傳、儲存及管理資源,並且讓媒體資源在不...

2023-10-02 ‧ 由 ysl0628 分享
DAY 18

營養師不開菜單的第十八天 - 使用 React-Hot-Toast 實現各種狀態通知

react-hot-toast 是一個專為 React 設計的輕量級通知提示(toast)套件。預設有成功、失敗、loading(Promise) 三種類型的...

2023-10-03 ‧ 由 ysl0628 分享
DAY 19

營養師不開菜單的第十九天 - Next.js 實作 - Link In Bio Tool 畫面設計與整體規劃

前言 在前15篇章節中,已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品,我...

2023-10-04 ‧ 由 ysl0628 分享
DAY 20

營養師不開菜單的第二十天 - Next.js 後端實戰 - Model 與 API

前言 在設計完畫面後,也大概確認了整個專案的頁面功能,在設置完資料夾結構後,就是進入前端後端實作的階段,大部分的頁面我是前後端功能同步進行,但為了避免畫面凌亂,...

2023-10-05 ‧ 由 ysl0628 分享