Next.js 實戰 Real-World Next.js

目    錄

第1部分  Next.js概述

第1章  Next.js簡介 3

　　1.1  技術需求 3

　　1.2  引入Next.js 4

　　1.3  Next.js與其他替代方案之間的比較 5

　　1.3.1  Gatsby 5

　　1.3.2  Razzle 5

　　1.3.3  Nuxt.js 6

　　1.3.4  Angular Universal 6

　　1.3.5  為何選擇Next.js 6

　　1.4  從React轉至Next.js 7

　　1.5  開啟Next.js之旅 7

　　1.5.1  默認的項目結構 8

　　1.5.2  TypeScript集成 9

　　1.5.3  自定義Babel和Webpack配置 10

　　1.6  本章小結 14

第2章  不同的渲染策略 15

　　2.1  技術需求 15

　　2.2  服務器端渲染（SSR） 15

　　2.3  客戶端渲染（CSR） 18

　　2.3.1  使用React.useEffect鉤子 20

　　2.3.2  使用process.browser變量 22

　　2.3.3  使用動態組件加載 22

　　2.4  靜態站點生成 23

　　2.5  本章小結 26

　　

第3章  Next.js基礎知識和內建組件 27

　　3.1  技術需求 27

　　3.2  路由系統 27

　　3.2.1  在頁面內使用路由變量 30

　　3.2.2  在組件中使用路由變量 31

　　3.2.3  客戶端導航 32

　　3.2.4  使用router.push方法 34

　　3.3  處理靜態數據資源 35

　　3.3.1  Next.js自動圖像優化 36

　　3.3.2  在外部服務上運行自動圖像優化 41

　　3.4  處理元數據 42

　　3.5  自定義_app.js和_document.js文件 49

　　3.5.1  _app.js頁面 50

　　3.5.2  _document.js頁面 54

　　3.6  本章小結 55

第2部分  Next.js實戰

第4章  在Next.js中組織代碼庫和獲取數據 59

　　4.1  技術需求 59

　　4.2  組織文件夾結構 60

　　4.2.1  組織組件 61

　　4.2.2  組織實用工具 62

　　4.2.3  組織靜態數據資源 63

　　4.2.4  組織樣式 64

　　4.2.5  lib文件 65

　　4.3  數據獲取機制 65

　　4.3.1  在服務器端上獲取數據 66

　　4.3.2  在服務器端上使用REST API 66

　　4.3.3  在客戶端上獲取數據 73

　　4.3.4  在客戶端上使用REST API 74

　　4.3.5  使用GraphQL API 81

　　4.4  本章小結 90

第5章  在Next.js中管理本地和全局狀態 91

　　5.1  技術需求 91

　　5.2  本地狀態管理 92

　　5.3  全局狀態管理 93

　　5.3.1  使用Context API 94

　　5.3.2  使用Redux 102

　　5.4  本章小結 109

第6章  CSS和內建樣式化方法 111

　　6.1  技術需求 111

　　6.2  考查和使用Styled JSX 112

　　6.3  CSS模塊 114

　　6.4  集成SASS和Next.js 119

　　6.5  本章小結 121

第7章  使用UI框架 123

　　7.1  技術需求 123

　　7.2  UI庫簡介 123

　　7.3  在Next.js中集成Chakra UI 124

　　7.3.1  利用Chakra UI和Next.js構建員工目錄 129

　　7.3.2  Chakra UI小結 140

　　7.4  在Next.js中集成TailwindCSS 140

　　7.5  集成Headless UI 150

　　7.6  本章小結 154

第8章  使用自定義服務器 155

　　8.1  技術需求 155

　　8.2  關於自定義服務器的使用 155

　　8.3  使用一個自定義Express.js服務器 156

　　8.4  使用自定義Fastify服務器 160

　　8.5  本章小結 162

第9章  測試Next.js 165

　　9.1  技術需求 165

　　9.2  測試簡介 165

　　9.3  運行單元和集成測試 166

　　9.4  利用Cypress進行端到端測試 173

　　9.5  本章小結 178

第10章  與SEO協同工作和性能管理 179

　　10.1  技術需求 179

　　10.2  SEO和性能簡介 179

　　10.3  基於性能和SEO的渲染策略 180

　　10.3.1  真實站點示例後的推理 182

　　10.3.2  渲染圖像詳細信息頁面 182

　　10.4  私有路由 184

　　10.5  快速回顧 184

　　10.6  處理SEO 185

　　10.7  處理性能問題 186

　　10.8  本章小結 189

第11章  不同的部署平臺 191

　　11.1  技術需求 191

　　11.2  不同部署平臺簡介 191

　　11.3  部署至Vercel平臺上 192

　　11.4  將一個靜態站點部署至CDN上 193

　　11.5  選擇一個CDN 194

　　11.6  將Next.js部署至任意服務器上 195

　　11.7  在Docker容器內運行Next.js 197

　　11.8  本章小結 198

第3部分  Next.js實例

第12章  管理身份驗證機制和用戶會話 203

　　12.1  技術需求 203

　　12.2  用戶會話和身份驗證簡介 203

　　12.3  JSON Web令牌 205

　　12.4  自定義身份驗證機制 208

　　12.5  利用Auth0實現身份驗證 222

　　12.6  本章小結 228

第13章  利用Next.js和GraphCMS構建電子商務網站 229

　　13.1  技術需求 229

　　13.2  創建電子商務網站 229

　　13.3  設置GraphCMS 230

　　13.4  創建店面、購物車和商品詳細信息頁面 234

　　13.5  利用Stripe處理支付問題 252

　　13.6  本章小結 260

第14章  示例項目 261

　　14.1  框架及其可能性 261

　　14.2  基於Next.js的真實應用程序 263

　　14.2.1  流式網站 263

　　14.2.2  博客平臺 264

　　14.2.3  實時聊天網站 265

　　14.3  後續發展 265

　　14.4  本章小結 266

·X·

Next.js實戰

　　

·XI·

目    錄