Renee Lan

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 檢測方法