前 言 　　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· 前 言 　　 　　 　　 　　 　　 　　 　　 　　 　　

• 暂无课件
• 暂无样章
• 暂无网络资源

扫描二维码
下载APP了解更多

版权图片链接