Next.js
 Next.js logo | |
| 原作者 | Guillermo Rauch[1] |
|---|---|
| 開發者 | Vercel 和開放原始碼社群[2] |
| 首次釋出 | 2016年10月25日[3] |
| 目前版本 |
|
| 原始碼庫 | github |
| 程式語言 | JavaScript, TypeScript and Rust |
| 平台 | Web platform |
| 檔案大小 | 17.0 MB |
| 類型 | Web application framework |
| 授權條款 | MIT License |
| 網站 | nextjs |
Next.js是一個構建於Node.js之上的開源Web開發框架，支援基於React的Web應用程式功能，例如伺服器端彩現和生成靜態網站。React於官方檔案內的「推薦的工具鏈」中提及Next.js，建議將其作為「使用Node.js構建伺服器彩現網站」的解決方案[5]。傳統的React應用程式只能在客戶端瀏覽器中彩現內容，Next.js擴充了此功能以包括在伺服器端彩現的應用程式。
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和StyledJSX[12]。此外，它也利用TypeScript支援和智慧型捆綁構建[23]。開放原始碼編譯器Babel用於將程式碼轉換和編譯成瀏覽器可用的JavaScript。Webpack，是另一個開放原始碼工具，用於在之後打包模組。所有這些工具都在指令終端機中與NPM一起使用[13]。
Next.js的主要特點是使用伺服器端彩現來減輕網頁瀏覽器的負擔並提供增強安全性。這可以針對應用程式的任何部分或整個專案完成，從而允許將內容豐富的頁面單獨挑出來用於伺服器端彩現[9]。也可以僅針對首次訪客進行，以減輕尚未下載任何網站資產的網路瀏覽器的負載[10]。「熱重載（Hot reloading）」功能會在更改發生時偵測更改並重新彩現適當的頁面，因此伺服器也避免重新啟動。允許對應用程式的程式碼所做的更改立即反映在網頁瀏覽器中，儘管某些瀏覽器會要求重新整理[9]。該軟體使用基於檔案系統的路由讓開發更便利，與包括對動態路由的支援。其他功能包括熱模組替換，以便可以實時替換模組，自動程式碼拆分，僅包括載入頁面所需的程式碼，以及頁面預取減少載入時間[9]。
Next.js還支援增量靜態再生（ISR）[24]和靜態站點生成（SSG）網站的編譯版本通常會在構建期間構建並以.next資料夾的型式儲存。當使用者提出請求時，作為靜態HTML頁面的預構建版本將被快取並傳送出去。這會使得載入時間非常快速，但它並非適合每個網站，尤其是對於經常更改並利用大量使用者輸入的互動式網站將會變得不適合。
外部連結
參考文獻
- ^ 1.0 1.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） （英語）.
- ^ vercel/next.js. GitHub. [2019-03-17]. （原始內容存檔於2019-03-16）.
- ^ 3.0 3.1 Next.js First Release. GitHub. 2019-03-14 [2019-03-17]. （原始內容存檔於2020-10-10）.
- ^ Release 14.2.2. 2024年4月18日 [2024年4月23日].
- ^ Recommended Toolchains. React documentation. [10 July 2021]. （原始內容存檔於2022-05-17）.
- ^ ZEIT is now Vercel, 21 April 2020 [2022-05-18], （原始內容存檔於2021-12-15）
- ^ Develop. Preview. Ship. For the best frontend teams – Vercel. vercel.com. [2020-09-22]. （原始內容存檔於2021-10-06）.
- ^ Differences Between Static Generated Sites And Server-Side Rendered Apps. Smashing Magazine. 2020-07-02 [2020-10-19]. （原始內容存檔於2022-05-21） （英語）.
- ^ 9.0 9.1 9.2 9.3 9.4 9.5 9.6 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.0 10.1 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） （英語）
- ^ 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.0 12.1 Comparing Styling Methods In Next.js. Smashing Magazine. 2020-09-17 [2020-10-20]. （原始內容存檔於2022-03-19） （英語）.
- ^ 13.0 13.1 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） （英語）.
- ^ 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） （美國英語）.
- ^ Krill, Paul. Next step after Node.js: Framework for 'universal' JavaScript apps. InfoWorld. 2016-10-31 [2020-10-20]. （原始內容存檔於2022-05-21） （英語）.
- ^ Krill, Paul. Next.js 2.0 plays better with React and JavaScript. InfoWorld. 2017-03-28 [2020-10-20]. （原始內容存檔於2022-03-18） （英語）.
- ^ Krill, Paul. Next.js 7 framework compiles faster, supports WebAssembly. InfoWorld. 2018-09-21 [2020-10-20]. （原始內容存檔於2022-05-21） （英語）.
- ^ Krill, Paul. Next.js 8 now supports serverless apps. InfoWorld. 2019-02-14 [2020-10-20]. （原始內容存檔於2022-05-21） （英語）.
- ^ Krill, Paul. Next.js upgrade emphasizes static site generation. InfoWorld. 2020-03-12 [2020-10-20]. （原始內容存檔於2022-05-21） （英語）.
- ^ Krill, Paul. Next.js adds incremental static pages regeneration. InfoWorld. July 27, 2020 [September 22, 2020]. （原始內容存檔於October 2, 2020）.
- ^ Next.js 11. [2021-07-10]. （原始內容存檔於2022-05-07）.
- ^ Next.js 12. nextjs.org. [2021-10-27]. （原始內容存檔於2022-06-02） （英語）.
- ^ Krill, Paul. Next.js 8 now supports serverless apps. InfoWorld. February 14, 2019 [September 22, 2020]. （原始內容存檔於October 2, 2020）.
- ^ Incremental Static Regeneration with Next.js. Vercel. [2022-03-06]. （原始內容存檔於2022-04-10） （英語）.