營養師不開菜單後的 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 檢測方法