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 1

營養師不開菜單的第一天 - 為什麼要做 Link In Bio Tool?

本系列文已改編出版為『營養師不開菜單後的 Next.js 全端轉職攻略:從專案規劃、畫面設計、資安到 SEO,挑戰一人 Side Project (iThom...

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

營養師不開菜單的第二天 - Link In Bio Tool 專案介紹

今天營養師除了不開菜單,也不介紹保健食品或健康宣導,而是來專案介紹,實作作品是一個 Link in Bio Tool 的 0 到 1 開發,會依據專案背景、目的...

2023-09-17 ‧ 由 ysl0628 分享
DAY 3

營養師不開菜單的第三天 - Link In Bio Tool 專案架構

我們人體的骨架是支撐我們人體重要的器官,它不僅提供結構,使我們能夠站立和行動還有保護內臟,我覺得專案架構就如同我們的骨架,如果沒有好好的建立,讓所有功能和模組都...

2023-09-18 ‧ 由 ysl0628 分享
DAY 4

營養師不開菜單的第四天 - 為什麼要用 Next.js

說到為什麼要用 Nextjs 來做主要的開發框架,我覺得可以透過我的產品目的及我的開發模式來決定: 我的專案是個公開性的網頁,並且希望用戶可以透過我的產品提...

2023-09-19 ‧ 由 ysl0628 分享
DAY 5

營養師不開菜單的第五天 - 靈活運用 Next.js 的三種 Route

超商有三種起司三明治,Next.js 則有三種 Route,Dynamic Routes、Parallel Routes、Intercepting Routes...

2023-09-20 ‧ 由 ysl0628 分享
DAY 6

營養師不開菜單的第六天 - 探討 Next.js 連結導覽 & Data Fetching

網站如餐廳,提供多樣「數位料理」供使用者選擇。在這虛擬餐廳,Navigation 就像精心排列的菜單,列舉所有「餐點」,助使用者快速找到所需。而當使用者做出選...

2023-09-21 ‧ 由 ysl0628 分享
DAY 7

營養師不開菜單的第七天 - Next.js 13 Server Component 初體驗

在營養教育的時候常會介紹整個餐點製作的過程,稱為「農場到餐桌」,我們的 code 就像食材,確定了網站的基礎結構和用戶體驗;而 Rendering 則像烹飪技巧...

2023-09-22 ‧ 由 ysl0628 分享
DAY 8

營養師不開菜單的第八天 - 為什麼要用 MongoDB

食物進入身體後,經過消化系統分解為能量儲存:葡萄糖給予快速能量,而脂肪提供長期儲存。考慮資料庫時,我們也會選擇適合的“能量”來源。像葡萄糖那樣,有些資料庫適合...

2023-09-23 ‧ 由 ysl0628 分享
DAY 9

營養師不開菜單的第九天 - 新世代 ORM 工具 Prisma 現學現賣

Prisma 就像人體中的消化酵素 (enzyme)。就如消化酵素幫助我們分解和吸收食物中的營養,將大的複雜分子轉化為我們身體容易吸收的小分子,Prisma...

2023-09-24 ‧ 由 ysl0628 分享
DAY 10

營養師不開菜單的第十天 - 為什麼要用 Tailwind CSS + Headless UI

TailwindCSS 與 Headless UI 就像用原型食物去做烹煮,而不是經過非常多製程的加工食品。當我們使用它們時,我們得到的是最基本、最純粹的成分,...

2023-09-25 ‧ 由 ysl0628 分享