營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThome鐵人賽系列書)

藍奕欣（Renee Lan）

一個在廚房走跳的營養師，日常面對廚師、廠商和老師家長。在疫情期間，發現需要跳脫現況，才能讓身心有更戲劇般的成長。因緣際會下，在不到四個月的時間裡自學並轉職，從中獲得了許多樂趣和成就感。

做為 React 前端工程師，與團隊中其他同事合作時，因好奇心而想了解更多關於網路及後端的世界。也勇於挑戰自我，開始進行獨立開發，因此踏入了 Next.js 的領域，摸索框架所提供的各種功能與特性，並運用於 Side Project 中。

擁有前、後台網站開發經驗，以及重構歷史悠久的程式碼經歷，並為旅遊電商改善網站效能，消除不良性的評分。作者秉持著『做中學，學中做』的精神，希望將經驗分享給轉職中或剛轉職的朋友們。

Chapter 01 專案介紹
1.1 專案目的（Why）
1.2 專案的執行者（Who）
1.3 專案時間規劃（When）
1.4 專案實作流程（How）
1.5 專案內容及使用工具（What）
　　1.5.1 需求分析
　　1.5.2 使用套件技術
1.6 專案部署在哪裡（Where）

Chapter 02 專案架構
2.1 資料夾結構
　　2.1.1 什麼是非預期的路徑？
　　2.1.2 非預期路徑的預防方法
2.2 資料庫結構

Chapter 03 為什麼選擇 Next.js
3.1 Pages and Layouts
　　3.1.1 如何設置路徑？
　　3.1.2 範例
　　3.1.3 檔案格式
3.2 Root Layout
　　3.2.1 功能
　　3.2.2 範例
3.3 Layouts
　　3.3.1 功能
　　3.3.2 範例
3.4 Route Group - ()
　　3.4.1 範例
　　3.4.2 Layout 設置
　　3.4.3 注意事項
3.5 Template
　　3.5.1 使用場景

Chapter 04 靈活運用 Next.js 的三種 Route
4.1 Dynamic Routes - []
　　4.1.1 如果資料夾命名為 [folderName]
　　4.1.2 如果資料夾命名為 [...folderName]
　　4.1.3 如果資料夾命名為 [[...folderName]]
4.2 Parallel Routes - @
4.3 Intercepting Routes - (.)

Chapter 05 展開 Next.js 的連結導覽
5.1 Linking and Navigating
　　5.1.1 Linking
　　5.1.2 useRouter
　　5.1.3 redirect
　　5.1.4 permanentRedirect
5.2 Pages Router 與 App Router 的 Navigation 機制
5.3 與原生 window.history 的使用差別

Chapter 06 煥然一新的 Data Fetching
6.1 Data fetch 的方法
　　6.1.1 Server Component – fetch
　　6.1.2 Server Component - 第三方套件
　　6.1.3 Client Component - Web fetch API 與 Route Handlers
　　6.1.4 Client Component - 第三方套件

Chapter 07 Server Component 初體驗
7.1 Server Component 的特徵
7.2 Client Component 的特徵
7.3 Server Component 與 Client Component
　　7.3.1 如何分辨誰是 Server 誰是 Client
　　7.3.2 兩者如何共存？
　　7.3.3 如何判斷什麼時候要加上 'use client'
7.4 Static rendering 與 dynamic rendering
　　7.4.1 靜態渲染（Static Rendering）
　　7.4.2 動態渲染（Dynamic Rendering）
　　7.4.3 什麼是 Dynamic Functions?
　　7.4.4 什麼是 Dynamic Fetches ?
　　7.4.5 與 SSR / SSG / ISR 的關聯

Chapter 08 資料庫的選擇 - MongoDB
8.1 資料庫的種類及特點
　　8.1.1 關聯式資料庫（RDBMS）
　　8.1.2 非關聯型資料庫（NoSQL）
8.2 如何選擇資料庫類型
8.3 選擇結果
8.4 MongoDB Atlas
8.5 名詞解釋

Chapter 09 新世代 ORM 工具 Prisma 現學現賣
9.1 什麼是 Prisma?
9.2 為什麼要用 Prisma ？
9.3 實作開始
　　9.3.1 連結 MongoDB
　　9.3.2 建立 Schema
　　9.3.3 安裝及生成 Prisma Client
　　9.3.4 封裝 Prisma Client 功能
9.4 ORM 語法
9.5 Prisma 結合 MongoDB 與其他資料庫有什麼不同？
9.6 ORM 和 Prisma 的差別

Chapter 10 Tailwind CSS + Headless UI 一氣呵成
10.1 Tailwind CSS
10.2 Headless UI
10.3 為什麼不使用現成的 UI 元件庫
10.4 為什麼我要使用 Tailwind CSS ＋ Headless UI

Chapter 11 NextAuth.js 開箱即用的身分驗證套件
11.1 為什麼要用 NextAuth.js?
11.2 設置方法
　　11.2.1 安裝
　　11.2.2 設置 API route
　　11.2.3 設置 authOptions
11.2.4 取得 session 的方法

Chapter 12 OAuth 權限申請：Google、Github、Facebook、Twitter
12.1 Google
12.2 GitHub
12.3 Facebook
12.4 Twitter(X)

Chapter 13 不需要 React Provider 管理狀態的 Zustand
13.1 什麼是 Zustand ？
13.2 為什麼要用 Zustand ？
13.3 使用方法
13.4 在元件中使用
13.5 Shallow
　　13.5.1 功能
　　13.5.2 原理
　　13.5.3 更新
13.6 Persist
13.7 Subscribe
13.8 同場加映

Chapter 14 全平台皆可使用的 Pragmatic drag and drop
14.1 簡介
　　14.1.1 定義拖曳
　　14.1.2 低層次的拖放行為
　　14.1.3 效能優化
　　14.1.4 實作方法

Chapter 15 從 Formik 跳槽到 React Hook Form
15.1 為什麼要用 React Hook Form ？
15.2 useForm options 屬性
15.3 useForm 回傳功能
15.4 驗證設置

Chapter 16 TypeScript 不夠？使用 Zod 做型別驗證
16.1 為什麼要用 Zod ?
16.2 Zod 可以怎麼用？
　　16.2.1 基礎方法
　　16.2.2 錯誤提示
16.3 驗證外來資料格式
16.4 結合 React Hook Form 的型別問題解決方案

Chapter 17 在 Next.js 中使用 Cloudinary 管理媒體資源
17.1 在自建的資料庫管理媒體資料？
17.2 為什麼要使用 Cloudinary ？
17.3 在專案中設置

Chapter 18 使用 React Hot Toast 實現各種狀態通知
18.1 為什麼要用 React Hot Toast ？
18.2 開始設置
18.3 其他使用方法
18.4 客製化 Toast 的屬性
18.5 其他客製化 toast 樣式

Chapter 19 Next.js 實作：Link In Bio Tool 畫面設計與整體規劃
19.1 設計工具及方法
　　19.1.1 設計方法
　　19.1.2 設計原則
19.2 各頁面設計
　　19.2.1 導覽列設計
　　19.2.2 首頁設計
　　19.2.3 登入／註冊頁面設計
　　19.2.4 後台頁面設計
　　19.2.5 前台頁面設定

Chapter 20 Next.js 後端實戰：Model 與 API
20.1 資料庫 Model 架構
　　20.1.1 Collections（Table）設計
　　20.1.2 關聯性（Relationship）
20.2 API 設計
　　20.2.1 API 需求
　　20.2.2 API 實作
　　20.2.3 Get Action

Chapter 21 Next.js 後端實戰：錯誤處理及 Security Headers
21.1 錯誤處理
　　21.1.1 什麼是狀態碼 ?
　　21.1.2 錯誤狀態碼
　　21.1.3 驗證錯誤處理
21.2 Security headers
　　21.2.1 設置方法