Next.js

本页使用了标题或全文手工转换
维基百科，自由的百科全书
Next.js
The Next.js logo, a stylization of its name
Next.js logo
原作者Guillermo Rauch[1]
开发者Vercel 和开放原始码社群[2]
首次发布2016年10月25日，​7年前​（2016-10-25）[3]
当前版本
  • 14.2.2 (2024年4月18日；稳定版本)[4]
编辑维基数据链接
原始码库github.com/vercel/next.js
编程语言JavaScript, TypeScript and Rust
平台Web platform
文件大小17.0 MB
类型Web application framework
许可协议MIT License
网站nextjs.org

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. ^ 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） （英语）. 
  2. ^ vercel/next.js. GitHub. [2019-03-17]. （原始内容存档于2019-03-16）. 
  3. ^ 3.0 3.1 Next.js First Release. GitHub. 2019-03-14 [2019-03-17]. （原始内容存档于2020-10-10）. 
  4. ^ Release 14.2.2. 2024年4月18日 [2024年4月23日]. 
  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. ^ 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. ^ 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） （英语） 
  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. ^ 12.0 12.1 Comparing Styling Methods In Next.js. Smashing Magazine. 2020-09-17 [2020-10-20]. （原始内容存档于2022-03-19） （英语）. 
  13. ^ 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） （英语）. 
  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） （英语）. 
取自“https://zh.wikipedia.org/w/index.php?title=Next.js&oldid=81742554”