Next.js實(shí)戰(zhàn)

第1部分  Next.js概述
第1章  Next.js簡介 3
　　1.1  技術(shù)需求 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轉(zhuǎn)至Next.js 7
　　1.5  開啟Next.js之旅 7
　　1.5.1  默認(rèn)的項(xiàng)目結(jié)構(gòu) 8
　　1.5.2  TypeScript集成 9
　　1.5.3  自定義Babel和Webpack配置 10
　　1.6  本章小結(jié) 14
第2章  不同的渲染策略 15
　　2.1  技術(shù)需求 15
　　2.2  服務(wù)器端渲染（SSR） 15
　　2.3  客戶端渲染（CSR） 18
　　2.3.1  使用React.useEffect鉤子 20
　　2.3.2  使用process.browser變量 22
　　2.3.3  使用動(dòng)態(tài)組件加載 22
　　2.4  靜態(tài)站點(diǎn)生成 23
　　2.5  本章小結(jié) 26
　　
第3章  Next.js基礎(chǔ)知識(shí)和內(nèi)建組件 27
　　3.1  技術(shù)需求 27
　　3.2  路由系統(tǒng) 27
　　3.2.1  在頁面內(nèi)使用路由變量 30
　　3.2.2  在組件中使用路由變量 31
　　3.2.3  客戶端導(dǎo)航 32
　　3.2.4  使用router.push方法 34
　　3.3  處理靜態(tài)數(shù)據(jù)資源 35
　　3.3.1  Next.js自動(dòng)圖像優(yōu)化 36
　　3.3.2  在外部服務(wù)上運(yùn)行自動(dòng)圖像優(yōu)化 41
　　3.4  處理元數(shù)據(jù) 42
　　3.5  自定義_app.js和_document.js文件 49
　　3.5.1  _app.js頁面 50
　　3.5.2  _document.js頁面 54
　　3.6  本章小結(jié) 55
第2部分  Next.js實(shí)戰(zhàn)
第4章  在Next.js中組織代碼庫和獲取數(shù)據(jù) 59
　　4.1  技術(shù)需求 59
　　4.2  組織文件夾結(jié)構(gòu) 60
　　4.2.1  組織組件 61
　　4.2.2  組織實(shí)用工具 62
　　4.2.3  組織靜態(tài)數(shù)據(jù)資源 63
　　4.2.4  組織樣式 64
　　4.2.5  lib文件 65
　　4.3  數(shù)據(jù)獲取機(jī)制 65
　　4.3.1  在服務(wù)器端上獲取數(shù)據(jù) 66
　　4.3.2  在服務(wù)器端上使用REST API 66
　　4.3.3  在客戶端上獲取數(shù)據(jù) 73
　　4.3.4  在客戶端上使用REST API 74
　　4.3.5  使用GraphQL API 81
　　4.4  本章小結(jié) 90
第5章  在Next.js中管理本地和全局狀態(tài) 91
　　5.1  技術(shù)需求 91
　　5.2  本地狀態(tài)管理 92
　　5.3  全局狀態(tài)管理 93
　　5.3.1  使用Context API 94
　　5.3.2  使用Redux 102
　　5.4  本章小結(jié) 109
第6章  CSS和內(nèi)建樣式化方法 111
　　6.1  技術(shù)需求 111
　　6.2  考查和使用Styled JSX 112
　　6.3  CSS模塊 114
　　6.4  集成SASS和Next.js 119
　　6.5  本章小結(jié) 121
第7章  使用UI框架 123
　　7.1  技術(shù)需求 123
　　7.2  UI庫簡介 123
　　7.3  在Next.js中集成Chakra UI 124
　　7.3.1  利用Chakra UI和Next.js構(gòu)建員工目錄 129
　　7.3.2  Chakra UI小結(jié) 140
　　7.4  在Next.js中集成TailwindCSS 140
　　7.5  集成Headless UI 150
　　7.6  本章小結(jié) 154
第8章  使用自定義服務(wù)器 155
　　8.1  技術(shù)需求 155
　　8.2  關(guān)于自定義服務(wù)器的使用 155
　　8.3  使用一個(gè)自定義Express.js服務(wù)器 156
　　8.4  使用自定義Fastify服務(wù)器 160
　　8.5  本章小結(jié) 162
第9章  測試Next.js 165
　　9.1  技術(shù)需求 165
　　9.2  測試簡介 165
　　9.3  運(yùn)行單元和集成測試 166
　　9.4  利用Cypress進(jìn)行端到端測試 173
　　9.5  本章小結(jié) 178
第10章  與SEO協(xié)同工作和性能管理 179
　　10.1  技術(shù)需求 179
　　10.2  SEO和性能簡介 179
　　10.3  基于性能和SEO的渲染策略 180
　　10.3.1  真實(shí)站點(diǎn)示例后的推理 182
　　10.3.2  渲染圖像詳細(xì)信息頁面 182
　　10.4  私有路由 184
　　10.5  快速回顧 184
　　10.6  處理SEO 185
　　10.7  處理性能問題 186
　　10.8  本章小結(jié) 189
第11章  不同的部署平臺(tái) 191
　　11.1  技術(shù)需求 191
　　11.2  不同部署平臺(tái)簡介 191
　　11.3  部署至Vercel平臺(tái)上 192
　　11.4  將一個(gè)靜態(tài)站點(diǎn)部署至CDN上 193
　　11.5  選擇一個(gè)CDN 194
　　11.6  將Next.js部署至任意服務(wù)器上 195
　　11.7  在Docker容器內(nèi)運(yùn)行Next.js 197
　　11.8  本章小結(jié) 198
第3部分  Next.js實(shí)例
第12章  管理身份驗(yàn)證機(jī)制和用戶會(huì)話 203
　　12.1  技術(shù)需求 203
　　12.2  用戶會(huì)話和身份驗(yàn)證簡介 203
　　12.3  JSON Web令牌 205
　　12.4  自定義身份驗(yàn)證機(jī)制 208
　　12.5  利用Auth0實(shí)現(xiàn)身份驗(yàn)證 222
　　12.6  本章小結(jié) 228
第13章  利用Next.js和GraphCMS構(gòu)建電子商務(wù)網(wǎng)站 229
　　13.1  技術(shù)需求 229
　　13.2  創(chuàng)建電子商務(wù)網(wǎng)站 229
　　13.3  設(shè)置GraphCMS 230
　　13.4  創(chuàng)建店面、購物車和商品詳細(xì)信息頁面 234
　　13.5  利用Stripe處理支付問題 252
　　13.6  本章小結(jié) 260
第14章  示例項(xiàng)目 261
　　14.1  框架及其可能性 261
　　14.2  基于Next.js的真實(shí)應(yīng)用程序 263
　　14.2.1  流式網(wǎng)站 263
　　14.2.2  博客平臺(tái) 264
　　14.2.3  實(shí)時(shí)聊天網(wǎng)站 265
　　14.3  后續(xù)發(fā)展 265
　　14.4  本章小結(jié) 266
·X·
Next.js實(shí)戰(zhàn)
　　
·XI·
目    錄