2024三掌柜赠书活动第四期： Next.js实战，构建现代化的可扩展Web应用

摘要
前言
Next.js简介
关于《 Next.js实战》
实战示例
最佳实践和进阶应用
编辑推荐
内容简介
作者简介
图书目录
书中前言/序言
《Next.js实战》全书速览
结束语

摘要：本文将介绍Next.js，一个流行的React框架，以及如何在实际项目中使用Next.js构建现代化的可扩展Web应用，以及探讨Next.js的核心概念和功能，并提供实用的示例和最佳实践，帮助读者快速上手和应用Next.js。

前言

随着Web应用的不断演进和用户对更快、更高级功能的需求，现代化的前端框架变得越来越重要。Next.js是一个基于React的框架，通过提供服务器端渲染（SSR）和静态网站生成（SSG）等功能，使得构建可扩展的Web应用变得更加便捷。本文将介绍Next.js，一个流行的React框架，以及如何在实际项目中使用Next.js构建现代化的可扩展Web应用，以及探讨Next.js的核心概念和功能，并提供实用的示例和最佳实践，帮助读者快速上手和应用Next.js。

Next.js简介

Next.js是一个基于React的全栈框架，它结合了服务器端渲染（SSR）、静态网站生成（SSG）、路由和构建工具等功能，为开发人员提供了一个完整的Web应用解决方案。Next.js具有以下特点：

服务器端渲染（SSR）和静态网站生成（SSG）：Next.js支持在服务器端渲染React组件，从而提供更快的首次加载速度和更好的SEO，而且通过静态网站生成，可以预先生成静态HTML文件，提供更快的页面加载速度和更好的缓存机制。
自动代码拆分：Next.js通过自动代码拆分功能，将页面和组件按需加载，从而优化加载时间和性能。
热模块替换：Next.js支持热模块替换，使开发人员可以在不刷新整个页面的情况下实时预览和调试代码的变化。
强大的路由系统：Next.js提供了简单而强大的路由系统，支持静态路由和动态路由，使得构建复杂的页面和应用变得更加容易。
TypeScript支持：Next.js天然支持TypeScript，可以为项目提供更好的类型检查和开发体验。

关于《 Next.js实战》

接下来给大家推荐一本关于 Next.js学习必备的书籍，这是一本关于 Next.js实战类的干货图书，一经上市就登上了京东“计算机与互联网”图书排行榜前列。另外，关注本文博主，点赞+收藏本文，且在本文评论区评论“我要入门 Next.js”，将选取三名幸运读者送出纸质版《 Next.js实战》一本，截止时间：2024.01.26。入手《 Next.js实战》传送门：https://item.jd.com/13625093.html或者《Next.js实战》([美]米歇尔·里瓦著李伟译)【简介_书评_在线阅读】 - 当当图书，个人觉得这本书非常的不错，尤其是想入门Next.js的开发者来讲，是一本不可多得的好书，值得拥有去学习。

实战示例

接下来，让我们通过一个实际示例来演示Next.js的实战应用。

1、创建新的Next.js项目

首先，我们使用以下命令创建一个新的Next.js项目：

npx create-next-app my-next-app

2、创建页面

在Next.js中，页面是由React组件组成的，我们可以在pages目录下创建新的页面，比如我们创建一个名为index.js的文件，作为应用的首页：

// pages/index.js

function HomePage() {
  return <h1>Welcome to Next.js!</h1>;
}

export default HomePage;

3、启动开发服务器

使用以下命令启动Next.js的开发服务器：

npm run dev

现在，您可以在浏览器中访问http://localhost:3000，看到我们刚刚创建的首页。

4、添加路由和导航

Next.js提供了内置的路由系统，使得导航和页面之间的跳转变得非常简单。我们可以使用Link组件来创建导航链接，比如我们可以在首页中添加一个链接到另一个页面：

// pages/index.js

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

export default HomePage;
`````jsx
// pages/about.js

function AboutPage() {
  return <h1>About Page</h1>;
}

export default AboutPage;

在上述代码中，我们创建了一个名为about.js的文件，作为关于页面。然后在首页中添加了一个指向关于页面的链接。

5、部署应用

使用以下命令将Next.js应用构建为静态文件：

npm run build

然后，可以将构建后的文件部署到任何支持静态文件托管的平台，如Vercel、Netlify等。

最佳实践和进阶应用

除了上面的基本示例外，Next.js还提供了许多高级功能和最佳实践，使得构建现代化、可扩展的Web应用更加容易，以下是一些进阶应用和最佳实践的示例：

数据获取：Next.js提供了getStaticProps和getServerSideProps等方法，用于在页面中获取数据，你可以使用这些方法从外部API、数据库或文件系统中获取数据，并将其传递给页面组件进行渲染。
认证和授权：Next.js可以与认证和授权库（如Passport.js、NextAuth.js）结合使用，实现用户认证和授权功能。
API路由：Next.js提供了API路由的功能，你可以使用pages/api目录下的文件创建后端API接口，实现与前端页面的数据交互。
样式和CSS-in-JS：Next.js支持多种样式和CSS-in-JS解决方案，如CSS模块、Styled Components、Tailwind CSS等。
部署和性能优化：Next.js提供了许多性能优化的工具和最佳实践，如代码分割、缓存策略、预渲染等，帮助开发者提升应用的性能和用户体验。

编辑推荐

Next.js是一项令人激动的技术，具有多种用途。如果用户（或其公司）打算创建一个电子商务平台、博客或者一个简单的站点，本书将引领读者学习如何在不影响性能、用户体验和开发人员满意度的情况下实现这些功能。

内容简介

《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是一个面向现代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 (

Hello, {props.name}!

  )

}

export default Greet;
　　（2）当我们希望引起读者注意代码块的特定部分时，相关行或项目则采用粗体进行显示，如下所示。

Read post

Read post

Read post

　　

　　（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，你可以快速构建现代化、可扩展的Web应用，并享受到其提供的服务器端渲染、静态网站生成、路由和构建工具等强大功能。无论你是初学者还是有经验的开发人员，Next.js都是一个值得学习和探索的框架，祝你在Next.js的实战中取得成功！