Next.js实战

　　Next.js是一个面向现代Web开发的、可扩展的、高性能的React.js框架，提供了大量的特性，如混合渲染、路由预取、自动图像优化和国际化机制。
　　Next.js是一项令人激动的技术，具有多种用途。如果用户（或其公司）打算创建一个电子商务平台、博客或者一个简单的站点，本书将引领读者学习如何在不影响性能、用户体验和开发人员满意度的情况下实现这些功能。本书首先讨论Next.js的基础知识，读者将理解框架如何帮助你实现相关目标；通过逐步构建真实的应用程序，读者将认识到Next.js的多样性。另外，读者还将学习如何针对站点选择适当的渲染方法、安全机制，以及如何将其发布至不同的提供商。其间，我们将重点讨论性能和开发人员满意度等问题。
　　在阅读完本书后，读者将能够使用任何无头CMS或数据源，并借助于Next.js设计、构建和部署现代架构。
适用读者
　　本书适用于那些想要通过现代Web框架（如Next.js）构建可扩展和可维护的全栈应用程序以提升React技能的Web开发人员。本书假设读者具备ES6 、React、Node.js和REST方面的中级知识。
本书内容
　　第1章主要介绍框架的基础知识，其间将展示如何构建一个新项目、如何自定义配置，以及如何将TypeScript用作Next.js开发的主编程语言（如果必要）。
　　第2章讨论渲染方法、服务器端渲染之间的差异、静态站点生成、增量静态再生等。
　　第3章深入考查Next.js路由系统和必要的内建组件，并重点讨论搜索引擎的优化和性能。
　　第4章介绍如何组织一个Next.js项目，以及如何在服务器端和客户端上获取数据。
　　第5章介绍基于React Context和Redux的状态管理，以及如何处理本地状态（组件级别）和全局状态（应用程序范围）。
　　第6章介绍构建于Next.js中的基本样式方法，如Styled JSX和CSS模块。此外，本章还展示如何针对本地开发和产品构建启用SASS预处理器。
　　第7章引入一些现代UI框架以结束与样式机制相关的讨论，如TailwindCSS、Chakra UI和Headless UI。
　　第8章讨论是否需要针对Next.js应用程序使用一个自定义服务器。除此之外，本章还展示如何将Next.js与较为常见的Node.js框架进行集成，即Express.js和Fastify。
　　第9章通过Cypress和react-testing-library考查与单元测试和端到端测试相关的一些实践方案。
　　第10章通过一些有用的Next.js应用程序提示和技巧深入考查SEO和性能提升问题。
　　第11章展示如何选取正确的平台以托管Next.js应用程序（取决于应用程序的特性和其他方面的内容）。
　　第?12?章阐述如何通过选取正确的身份验证提供商来安全地管理用户的身份验证。除 此之外，本章还展示如何将Auth0（一个较为流行的身份管理平台）与Next.js应用程序进行集成。
　　第13章利用Next.js、Chakra UI和GraphCMS创建一个真实的Next.js电子商务平台。
　　第?14?章给出一些如何继续学习框架和提供商方面的技巧，并通过一些示例项目予以 实现，以进一步巩固Next.js方面的知识。
软件和硬件需求
　　为了深入理解本书内容，读者需要亲自编写各章节中所展示的代码。如果该过程中出现任何错误，读者可访问本书的GitHub储存库下载示例代码。
　　本书的软件和硬件需求如表1所示。
表1
软件和硬件需求 操作系统需求 Next.js Windows、macOS或Linux Node.js（包括npm和yarn） Windows、macOS或Linux Docker（第11章将使用Docker） Windows、macOS或Linux 下载示例代码文件
　　读者可访问本书的GitHub存储库查看本书中的示例代码文件，对应网址为https://github.com/PacktPublishing/Real-World-Next.js。如果代码有更新，GitHub储存库也将随之更新。
　　除此之外，读者还可访问https://github.com/PacktPublishing/获取本书的其他代码包和视频内容。
下载彩色图像
　　我们还提供了一个PDF文件，其中包含彩色的屏幕截图和本书中所使用的图表，读者可访问https://static.packt-cdn.com/downloads/9781801073493_ColorImages.pdf进行下载。
本书约定
　　（1）代码块的设置如下所示。
　　
export async function getServerSideProps({ params }) { 
  const { name } = params;

  return {
    props: {
      name
    }
  }
}

function Greet(props) {
  return (
    <h1> Hello, {props.name}! </h1>
  )
}

export default Greet;
　　
　　（2）当我们希望引起读者注意代码块的特定部分时，相关行或项目则采用粗体进行显示，如下所示。
　　
<Link href='/blog/2021-01-01/happy-new-year'> 
    Read post
</Link>
<Link href='/blog/2021-03-05/match-update'>
    Read post
</Link>
<Link href='/blog/2021-04-23/i-love-nextjs'>
    Read post
</Link>
　　
　　（3）任何命令行的输入或输出都采用如下所示的粗体代码形式。
　　
echo "Hello, world!" >> ./public/index.txt
读者反馈和客户支持
　　欢迎读者对本书提出建议或意见。
　　对此，读者可向customercare@packtpub.com发送邮件，并以书名作为邮件标题。
勘误表
　　尽管我们希望做到尽善尽美，但书中欠妥之处在所难免。如果读者发现谬误之处，无论是文字错误抑或代码错误，还望不吝赐教。对此，读者可访问www.packtpub.com/support-errata，选取对应书籍，输入并提交相关问题的详细内容。
版权须知
　　一直以来，互联网上的版权问题从未间断，Packt出版社对此类问题非常重视。若读者在互联网上发现本书任意形式的副本，请告知我们网络地址或网站名称，我们将对此予以处理。关于盗版问题，读者可发送电子邮件至copyright@packtpub.com。
　　若读者针对某项技术具有专家级的见解，抑或计划撰写书籍或完善某部著作的出版工作，则可访问authors.packtpub.com。
问题解答
　　若读者对本书有任何疑问，均可发送电子邮件至questions@packtpub.com，我们将竭诚为您服务。
　　
　　
·IV·
Next.js实战
　　
·V·
前    言
　　
　　
　　
　　
　　
　　
　　
　　
　　

《Next.js实战》详细阐述了与Next.js框架相关的基本解决方案，主要包括Next.js简介、不同的渲染策略、Next.js基础知识和内建组件、在Next.js中组织代码库和获取数据、在Next.js中管理本地和全局状态、CSS和内建样式化方法、使用UI框架、使用自定义服务器、测试Next.js、与SEO协同工作和性能管理、不同的部署平台、管理身份验证机制和用户会话、利用Next.js和GraphCMS构建电子商务网站等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。

米歇尔·里瓦是一位充满激情和经验丰富的软件架构师和谷歌开发专家，来自意大利米兰。多年来，他在许多不同的编程语言和范式中为大公司和基金会的许多开源项目做出了贡献，包括Haskell、Elixir、Go和TypeScript。他还就广泛的主题撰写了数十篇公共领域的文章，并在国际会议和聚会上发表了许多演讲。在撰写这本书的时候，他在ViacomCBS的架构团队担任高级软件工程师，在他们的流媒体网站和网络的核心构建了一个多租户Node.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·
目    录
　　
　　
　　
　　
　　
　　
　　
　　
　　

《Next.js实战》详细阐述了与Next.js框架相关的基本解决方案，主要包括Next.js简介、不同的渲染策略、Next.js基础知识和内建组件、在Next.js中组织代码库和获取数据、在Next.js中管理本地和全局状态、CSS和内建样式化方法、使用UI框架、使用自定义服务器、测试Next.js、与SEO协同工作和性能管理、不同的部署平台、管理身份验证机制和用户会话、利用Next.js和GraphCMS构建电子商务网站等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。

米歇尔·里瓦是一位充满激情和经验丰富的软件架构师和谷歌开发专家，来自意大利米兰。多年来，他在许多不同的编程语言和范式中为大公司和基金会的许多开源项目做出了贡献，包括Haskell、Elixir、Go和TypeScript。他还就广泛的主题撰写了数十篇公共领域的文章，并在国际会议和聚会上发表了许多演讲。在撰写这本书的时候，他在ViacomCBS的架构团队担任高级软件工程师，在他们的流媒体网站和网络的核心构建了一个多租户Node.js应用程序。