目    录

第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·

目    录