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

＜內容簡介＞

打造零到一的 Side Project，扭轉前端開發職涯的偉大航道

Next.js 讓前端工程師也能獨立開發高完整度的專案！

本書內容改編自第15屆 iThome 鐵人賽SideProject30組優選系列文章《營養師不開菜單要用 Next.js 13 寫全端》。本書是專為希望在 Next.js 框架下進行全端開發的讀者所設計的全面指南，不深入探討 Next.js 或其他工具的底層原理，而是聚焦於實際開發中的規劃思維、工具選擇及應用方法。

以一個 Link in Bio的專案為範例，從專案簡介與架構概要開始，逐步深入 Next.js 框架的核心功能，教導讀者如何選擇並整合適合的開發套件，並詳細展示前後端開發的關鍵實作，介紹效能優化與部署策略，最後介紹對於網址惡意威脅的防範方法。希望已具備 React 或 Next.js 基礎，並希望更進一步的開發者，可以透過本書了解如何不需要借助其他網頁領域的開發，獨自從零打造一個功能完整的全端應用。

重點摘要
✦ 創新之旅
解析 App Router 的前後端應用
✦ 套件挑選技巧
分析需求羅列利弊，精確選擇
✦ 現代部署實踐
容器化與雲端部署，網址安全性檢測
✦ 結合營養知識
附註營養小知識，增趣又實用

目標讀者
● 已具備 React基礎，希望進一步深入了解全端開發技術的開發者
● 想要一人從構思到實現整體開發流程的前端工程師
● 希望面試時可以帶有自己獨立完成 Side Project 的初轉職者
● 想要了解 Next.js App Router 創新應用的網頁工程師
● 想要獲得營養基礎小知識的所有工程師


★專家推薦：

這本書提供了一個極為實用的全端開發指南，尤其適合那些希望利用 Next.js 框架獨立開發高完整度專案的開發者。透過一個完整的 Side Project 案例，作者深入解析了 Next.js 的核心功能，從專案規劃到工具選擇，再到前後端關鍵實作和效能優化，每一步都體現了作者在全端開發領域的細膩見解。無論你是希望獨立完成從構思到實現的整體開發流程，還是希望透過一個功能完整的 Side Project 在面試中脫穎而出，這本書都能為你提供所需的知識和技能。書中詳實的案例分析和實用的開發技巧，將幫助你在實際工作中應對複雜的開發挑戰，提升你的全端開發能力。我由衷地推薦本書，給每一位希望在全端開發道路上不斷進步的開發者。
──── Mike Hsu｜《從異世界歸來發現只剩自己不會 Kubernetes》作者


★目錄：

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 設置方法

Chapter 22 Next.js Middleware 實作權限及 CSP，建起護城河
22.1 功能
22.2 設置
　　22.2.1 Matching Paths 設定
　　22.2.2 啟動過濾判斷

Chapter 23 Next.js 前端實戰 – 前端實作流程及狀態管理
23.1 前端實作流程
　　23.1.1 狀態管理邏輯

Chapter 24 Next.js 前端實戰 – 頁面核心功能實作
24.1 NavBar
24.2 登入／註冊頁面
　　24.2.1 標準帳號密碼方式
　　24.2.2 OAuth 方式
24.3 基本設定
24.4 連結設定
　　24.4.1 新增修改連結
　　24.4.2 更新連結順序
24.5 前台頁面延伸功能

Chapter 25 Next.js 前端實戰 – 頁面及請求的錯誤處理
25.1 API 請求的錯誤處理
　　25.1.1 前端錯誤處理實作
25.2 404 Page Not Found 錯誤處理
25.3 未知的頁面錯誤處理

Chapter 26 運用 Next.js 內建工具，打造專案效能優化
26.1 Image
　　26.1.1 Next.js 的圖片優化功能
26.2 Font
　　26.2.1 字型的優化
26.3 Loading

Chapter 27 Next.js SEO 極致優化，為網站提升曝光度！
27.1 Metadata 對 SEO 的優化
27.2 Metadata API 設置
　　27.2.1 Title Tag
　　27.2.2 Meta Description
　　27.2.3 Canonical Tag
　　27.2.4 Robots Meta Tag
　　27.2.5 Sitemap 設置
　　27.2.6 Open Graph Tags and Twitter Cards

Chapter 28 Next.js in Docker，跟上容器化技術
28.1 關於容器化
28.2 Docker 簡介
28.3 Docker 建置實作

Chapter 29 Next.js 搭配 Vercel 實現分鐘級一鍵部署
29.1 前置作業
29.2 註冊登入 Vercel
29.3 開始部署
29.4 錯誤處理
29.5 部署成功後

Chapter 30 建立網址安全性檢測機制
30.1 檢測項目
30.2 檢測方法


＜作者簡介＞

藍奕欣（Renee Lan）

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

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

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