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