Next.js

Next.js是一個構建於 Node.js 之上的開源 Web 開發框架，支援基於 React 的 Web 應用程序功能，例如伺服器端渲染和生成靜態網站。 React 於官方文件內的“推薦的工具鏈”中提及 Next.js，建議將其作為“使用 Node.js 構建伺服器渲染網站”的解決方案。^[5] 傳統的 React 應用程式只能在客戶端瀏覽器中渲染內容，Next.js 擴充了此功能以包括在伺服器端渲染的應用程式。

Next.js

Next.js logo
原作者	Guillermo Rauch^[1]
開發者	Vercel and open-source community^[2]
首次发布	2016年10月25日，​6年前​（2016-10-25）^[3]
目前版本	13.1.1 (2022年12月24日)^[4]
源代码库	github.com/vercel/next.js
编程语言	JavaScript, TypeScript and Rust
系統平台	Web platform
文件大小	17.0 MB
类型	Web application framework
许可协议	MIT License
网站	nextjs.org

Next.js 的版權和商標歸 Vercel（前身為 ZEIT）所有^[6] ，該公司也維護和主導其開放原始碼專案的開發。^[7]

背景

Next.js 是一個 React 框架，它支援一些額外的功能，包括伺服器端渲染和靜態網站生成。^[8] React 是一個 JavaScript 庫，傳統上用於構建使用 JavaScript 在客戶端瀏覽器中渲染的網頁應用程式。^[9] 然而開發者意識到這種策略存在一些問題，例如無法滿足無法訪問或禁用 JavaScript 的用戶、潛在的安全問題、明顯延長頁面載入時間以及可能損害網站的整體搜索引擎優化。^[9] 諸如 Next.js 之類的框架利用允許在發送到客戶端之前在伺服器端渲染部分或全部網站來避開這些問題。^[9][10] Next.js 是最流行的 React 框架之一。^[11] 它是啟動新應用程序時可用的幾個推薦「工具鏈」之一，所有這些都提供了一個抽象層來協助完成常見的任務。^[12] Next.js 需要 Node.js 而且可以利用 Node Package Manager 進行啟動。

Google 已向 Next.js 專案捐款，在 2019 年貢獻了 43 個拉取請求（Pull request），協助修剪了未使用的 JavaScript、減少了載入時間與增加了改進指標。^[13] 截至 2020 年 3 月，該框架已被許多大型網站使用，包括 Netflix、GitHub、Uber、Ticketmaster 和星巴克。^[9] 2020 年初，Vercel宣布募得了 2100 萬美元的 A 輪融資，用來支援軟體的改進。^[1] 該框架的原作者 Guillermo Rauch 目前是 Vercel 的 CEO，該項目的開發主管是 Tim Neutkens。^[14]

發展歷程

Next.js 於 2016 年 10 月 25 日首次在 GitHub 上作為開放原始碼專案發布。.^[3] 它最初是基於六個原則開發的：開箱即用的功能，無需設定，JavaScript 無處不在，所有功能都用 JavaScript 編寫，自動程式碼拆分和伺服器渲染，可配置的資料獲取，預測請求和簡化部署.^[15] Next.js 2.0 於 2017 年 3 月發布，其中包括多項改善，使小型網站開發變得更加容易。 還提高了構建效率並提高了熱模塊更換功能的可擴展性。^[16] 7.0 版於 2018 年 9 月發布，改進了錯誤處理並支持 React 的上下文 API 以改進動態路由處理。也是第一個升級到 webpack 4 的版本。^[17] 8.0 版於 2019 年 2 月發布，是第一個提供無伺服器應用程式部署的版本，其中程式碼被拆分為按需運行的匿名函式（Lambda function）。 該版本還減少了靜態匯出所需的時間和資源，並提高了預取性能。^[18] 9.3 版於 2020 年 3 月發布，包括各種優化以及全域 Sass 和 CSS 模組支持。^[19] 於2020 年 7 月 27 日，Next.js 9.5 版發布，增加了包括增量靜態再生（incremental static regeneration ISR）、重新寫入和重新導向支援在內的新功能。^[20]於 2021 年 6 月 15 日 Next.js 第 11 版發布，其中包括：Webpack 5 支援、實時協作編碼功能預覽「Next.js Live」，以及從 Create React App 自動轉換為 Next.js 的實驗性功能相容形式「Create React App Migration」。^[21] 2021 年 10 月 26 日，Next.js 12 發布，增加了 Rust 編譯器，使編譯速度更快，支持 AVIF，Edge Functions & 中介軟體，原生 ESM & URL 輸入。^[22]

樣式和功能

Next.js 支持 CSS 樣式以及預編譯的 SCSS 和 SASS、CSS-in-JS 和Styled JSX。^[12] 此外，它也利用 TypeScript 支援和智慧型捆綁構建。^[23] 開放原始碼編譯器 Babel 用於將程式碼轉換和編譯成瀏覽器可用的 JavaScript。 Webpack，是另一個開放原始碼工具，用於在之後打包模組。所有這些工具都在指令終端機中與 NPM 一起使用。^[13]

Next.js 的主要特點是使用伺服器端渲染來減輕網頁瀏覽器的負擔並提供增強安全性。 這可以針對應用程式的任何部分或整個專案完成，從而允許將內容豐富的頁面單獨挑出來用於伺服器端渲染。^[9] 也可以僅針對首次訪客進行，以減輕尚未下載任何網站資產的網路瀏覽器的負載。^[10] 「熱重載（Hot reloading）」功能會在更改發生時偵測更改並重新渲染適當的頁面，因此伺服器也避免重新啟動。 允許對應用程式的程式碼所做的更改立即反映在網頁瀏覽器中，儘管某些瀏覽器會要求重新整理。^[9] 該軟件使用基於檔案系統的路由讓開發更便利，與包括對動態路由的支援。其他功能包括熱模組替換，以便可以實時替換模組，自動程式碼拆分，僅包括載入頁面所需的程式碼，以及頁面預取減少載入時間。^[9]

Next.js 還支持增量靜態再生 (ISR)^[24] 和靜態站點生成 (SSG) - 網站的編譯版本通常會在構建期間構建並以.next 文件夾的型式儲存。 當用戶提出請求時，作為靜態 HTML 頁面的預構建版本將被緩存並發送出去。 這會使得載入時間非常快速，但它並非適合每個網站，尤其是對於經常更改並利用大量用戶輸入的互動式網站將會變得不適合。

外部連結

• Next.js 網站（页面存档备份，存于互联网档案馆）
• Next.js 原始碼（页面存档备份，存于互联网档案馆）

参考文獻

1. April 21, Matt Asay in Developer on; 2020; Pst, 9:51 Am. How Next.js aims to simplify front-end development. TechRepublic. 21 April 2020 [2020-10-20]. （原始内容于2022-05-23） （英语）. 
2. vercel/next.js. GitHub. [2019-03-17]. （原始内容于2019-03-16）. 
3. Next.js First Release. GitHub. 2019-03-14 [2019-03-17]. （原始内容于2020-10-10）. 
4. Release 13.1.1. 2022年12月24日 [2023年1月12日]. 
5. Recommended Toolchains. React documentation. [10 July 2021]. （原始内容于2022-05-17）. 
6. ZEIT is now Vercel, 21 April 2020 [2022-05-18], （原始内容于2021-12-15） 
7. Develop. Preview. Ship. For the best frontend teams – Vercel. vercel.com. [2020-09-22]. （原始内容于2021-10-06）. 
8. Differences Between Static Generated Sites And Server-Side Rendered Apps. Smashing Magazine. 2020-07-02 [2020-10-19]. （原始内容于2022-05-21） （英语）. 
9. Thakkar, Mohit, Thakkar, Mohit , 编, Next.js, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (Berkeley, CA: Apress), 2020: 93–137 [2020-10-20], ISBN 978-1-4842-5869-9, S2CID 241224880, doi:10.1007/978-1-4842-5869-9_3, （原始内容于2022-06-06） （英语） 
10. Thakkar, Mohit, Thakkar, Mohit , 编, Adding Server-Side Rendering to Your React Application, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (Berkeley, CA: Apress), 2020: 139–152 [2020-10-20], ISBN 978-1-4842-5869-9, S2CID 216333955, doi:10.1007/978-1-4842-5869-9_4, （原始内容于2020-10-26） （英语） 
11. December 2, Matt Asay in Developer on; 2019; Pst, 11:58 Am. Why front-end development may be the new frontier. TechRepublic. 2 December 2019 [2020-10-20]. （原始内容于2022-03-25） （英语）. 
12. Comparing Styling Methods In Next.js. Smashing Magazine. 2020-09-17 [2020-10-20]. （原始内容于2022-03-19） （英语）. 
13. January 31, Matt Asay in Developer on; 2020; Pst, 6:33 Pm. An insider's look at Google's web framework contributions to Next.js and more. TechRepublic. February 2020 [2020-10-19]. （原始内容于2022-05-21） （英语）. 
14. Static site generation with single page app functionality? That's what's coming Next(.js). Stack Overflow Blog. 2020-10-07 [2020-10-20]. （原始内容于2022-03-25） （美国英语）. 
15. Krill, Paul. Next step after Node.js: Framework for 'universal' JavaScript apps. InfoWorld. 2016-10-31 [2020-10-20]. （原始内容于2022-05-21） （英语）. 
16. Krill, Paul. Next.js 2.0 plays better with React and JavaScript. InfoWorld. 2017-03-28 [2020-10-20]. （原始内容于2022-03-18） （英语）. 
17. Krill, Paul. Next.js 7 framework compiles faster, supports WebAssembly. InfoWorld. 2018-09-21 [2020-10-20]. （原始内容于2022-05-21） （英语）. 
18. Krill, Paul. Next.js 8 now supports serverless apps. InfoWorld. 2019-02-14 [2020-10-20]. （原始内容于2022-05-21） （英语）. 
19. Krill, Paul. Next.js upgrade emphasizes static site generation. InfoWorld. 2020-03-12 [2020-10-20]. （原始内容于2022-05-21） （英语）. 
20. Krill, Paul. Next.js adds incremental static pages regeneration. InfoWorld. July 27, 2020 [September 22, 2020]. （原始内容于October 2, 2020）. 
21. Next.js 11. [2021-07-10]. （原始内容于2022-05-07）. 
22. Next.js 12. nextjs.org. [2021-10-27]. （原始内容于2022-06-02） （英语）. 
23. Krill, Paul. Next.js 8 now supports serverless apps. InfoWorld. February 14, 2019 [September 22, 2020]. （原始内容于October 2, 2020）. 
24. Incremental Static Regeneration with Next.js. Vercel. [2022-03-06]. （原始内容于2022-04-10） （英语）.