在現(xiàn)代 web 開發(fā)中，前端框架的選擇變得越來越重要。Next.js 作為一種流行的 React 框架，為開發(fā)者提供了快速構(gòu)建現(xiàn)代化 web 應(yīng)用的能力。它不僅提供了基礎(chǔ)的頁面路由和靜態(tài)生成，還通過服務(wù)器端渲染和自動代碼分割等高級特性，讓應(yīng)用具備更好的性能和用戶體驗(yàn)。因此，熟練掌握 Next.js 已經(jīng)成為前端開發(fā)者的必備技能之一。
本文將為你提供一份完整的 Next.js 學(xué)習(xí)指南，旨在幫助你從基礎(chǔ)到實(shí)戰(zhàn)，深入了解其原理，并準(zhǔn)備好應(yīng)對面試中的問題。
《Next.js 開發(fā)指南》點(diǎn)擊查看詳情
課程介紹
Next.js 是一個構(gòu)建于 Node.js 之上的開源 Web 開發(fā)框架，它擴(kuò)展了最新的 React 特性，集成了基于 Rust 的 JavaScript 工具，可以幫助你快速創(chuàng)建全棧 Web 應(yīng)用 （full-stack Web applications） 。
對于有一定 React 基礎(chǔ)的同學(xué)，Next.js 毫無疑問是進(jìn)階全棧工程師的最佳選擇！
React 官方文檔優(yōu)先推薦的創(chuàng)建項(xiàng)目的方式便是使用 Next.js。目前 Next.js 在?GitHub?已有 117k star，?Npm?周下載量 495W 左右，堪稱最受歡迎的 Node.js 開發(fā)框架之一。
《Next.js 開發(fā)指南》點(diǎn)擊查看詳情
Next.js 于 2016 年底開源發(fā)布，歷經(jīng) 7 年的發(fā)展，各種解決方案和社區(qū)生態(tài)已經(jīng)十分完善。Next.js 更是于 2022 年底推出了支持 React Server Components 的顛覆性的 v13 版本。
在此版本，Next.js 推出了全新的 App Router 模式，同時優(yōu)化升級了構(gòu)建工具，為開發(fā)者帶來了截然不同的開發(fā)體驗(yàn)。App Router 于 2023 年 5 月發(fā)布的 v13.4 版本進(jìn)入穩(wěn)定化。2023 年 10 月，Next.js 發(fā)布 v14 版本，Server Actions 也進(jìn)入穩(wěn)定化。這本小冊便是基于目前最新的 v14 版本。
Next.js 提供開箱即用的 create-next-app腳手架，內(nèi)置支持 TypeScript、ESLint，零配置即可實(shí)現(xiàn)自動編譯和打包。支持服務(wù)端渲染（SSR）、客戶端渲染（CSR）、靜態(tài)站點(diǎn)生成（SSG）、增量靜態(tài)再生（ISR）、以及流式加載（Streaming）。v13 版本提供了基于 React Server Component 全新的路由解決方案 App Router 以及服務(wù)端數(shù)據(jù)更改方案 Server Actions，當(dāng)然不止這些，Next.js 同時提供了現(xiàn)代 Web 應(yīng)用開發(fā)常見的解決方案如：路由、渲染、中間件、數(shù)據(jù)獲取、緩存、樣式、國際化、元數(shù)據(jù)、Edge Runtime 等。
盡管是在業(yè)界非常受歡迎的框架，但 Next.js 文檔在國內(nèi)漢化方面十分落后，能搜到的中文文檔基本都停留在非常老的版本且處于無人維護(hù)狀態(tài)， 而 Next.js 官方文檔早已全部重寫，提供了多達(dá)百篇的詳細(xì)介紹。加上 Next.js 2022 年底推出 v13 版本，提供了全新的功能，然而這些內(nèi)容在國內(nèi)也沒有系統(tǒng)完整的介紹，能搜到的更多是單篇的粗略介紹，技術(shù)細(xì)節(jié)寥寥。
這就導(dǎo)致大家在使用 Next.js 的時候可以快速上手，但對于高階的 API 卻知之甚少。有更簡單便捷的實(shí)現(xiàn)方案卻不知道，對于一些細(xì)枝末節(jié)上的問題需要多次深入英文文檔翻找，對于一些沒有過多解釋的地方更需要自己反復(fù)測試和理解，這無疑增大了使用 Next.js 的成本。
筆者曾經(jīng)完整的整理過?TypeScript 文檔，啃過 ECMAScript 規(guī)范，閱讀英文文檔倒也算順暢，日常項(xiàng)目中也有在使用 Next.js，對于 Next.js 有一些自己的心得。為了幫助大家系統(tǒng)全面的掌握 Next.js，這本小冊將分為“基礎(chǔ)篇、實(shí)戰(zhàn)篇、原理篇、面試篇”四大板塊：
基礎(chǔ)篇： 基于最新的 Next.js 官方文檔，循序漸進(jìn)講解 Next.js App Router、高級路由功能、路由處理程序、中間件、數(shù)據(jù)獲取與緩存、React Server Component、Streaming、Edge Runtime、Tailwind CSS、內(nèi)置優(yōu)化組件、MDX、靜態(tài)導(dǎo)出、路由段配置、環(huán)境變量、Draft Mode、Next CLI 及配置項(xiàng)、國際化、常用 API 方法等內(nèi)容。內(nèi)容上力求做到詳盡無遺漏，細(xì)節(jié)上添加多處解釋和示例幫助大家理解，希望能將此本小冊作為大家開發(fā) Next.js 項(xiàng)目時的必備指導(dǎo)手冊。
實(shí)戰(zhàn)篇： 學(xué)技術(shù)尤其不能紙上談兵，基礎(chǔ)篇的知識細(xì)節(jié)也許過于零碎，實(shí)戰(zhàn)篇的目的在于幫助你將這些知識融會貫通。我們會寫 3 個完整的全棧項(xiàng)目，包括：
1. React Notes 項(xiàng)目（目的在于深入理解服務(wù)端組件、客戶端組件的特性）
2. 博客項(xiàng)目（目的在于深入理解 Next.js 渲染方式與 MDX）
3. 移動端 HTML5 項(xiàng)目 （仿 APP 樣式，目的在于學(xué)習(xí) Next.js 最佳實(shí)踐）
相關(guān)的技術(shù)選型有 Ant Design + MongoDB + Mongoose + Redis + Nginx，會提供完整的源碼供大家調(diào)試學(xué)習(xí)。
源碼篇： Next.js 的源碼閱讀不算容易，我將從源碼的角度幫助大家理解 Next.js 的運(yùn)行原理與實(shí)現(xiàn)，讓大家在使用 Next.js API 的時候，知其然知其所以然。遇到問題的時候，能追根溯源，徹底的解決問題。
面試篇： 最后，我會對面試中常問的 Next.js 相關(guān)問題做一份整理，告訴大家解題思路的同時提供一份自己的答案，幫助大家在面試的時候有所準(zhǔn)備。
《Next.js 開發(fā)指南》點(diǎn)擊查看詳情
你會學(xué)到什么？
1. 循序漸進(jìn)、系統(tǒng)全面的的建立 Next.js 知識體系；
2. 學(xué)習(xí) Next.js 最新的技術(shù)特性，了解技術(shù)前沿實(shí)踐；
3. 了解 Next.js 的運(yùn)行原理，知其所以然；
4. 一本可供開發(fā) Next.js 項(xiàng)目時隨時翻閱的技術(shù)指導(dǎo)手冊；
5. 一份關(guān)于 Next.js 的面試問題指導(dǎo)。
