Nothing Special   »   [go: up one dir, main page]
Jump to content

Next.js: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
m Fixed typo
Tags: canned edit summary Mobile edit Mobile app edit iOS app edit
slight grammar fix
Line 29: Line 29:
Next.js is a [[React (web framework)|React]] framework that enables several extra features, including [[server-side scripting|server-side rendering]] and generating [[static web page|static website]]s.<ref name=compareStatic>{{Cite web|date=2020-07-02|title=Differences Between Static Generated Sites And Server-Side Rendered Apps|url=https://www.smashingmagazine.com/2020/07/differences-static-generated-sites-server-side-rendered-apps/|access-date=2020-10-19|website=[[Smashing Magazine]]|language=en}}</ref> React is a [[JavaScript library]] that is traditionally used to build web applications rendered in the client's browser with JavaScript.<ref name=thakkar1>{{Citation|last=Thakkar|first=Mohit|title=Next.js|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_3|work=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|pages=93–137|editor-last=Thakkar|editor-first=Mohit|place=Berkeley, CA|publisher=[[Apress]]|language=en|doi=10.1007/978-1-4842-5869-9_3|isbn=978-1-4842-5869-9|s2cid=241224880|access-date=2020-10-20}}</ref> Developers recognize several problems with this strategy however, such as not catering to users who do not have access to JavaScript or have disabled it, potential security issues, significantly extended page loading times, and harm to the site's overall [[search engine optimization]].<ref name=thakkar1 /> Frameworks such as Next.js sidestep these problems by allowing some or all of the website to be rendered on the server-side before being sent to the client.<ref name=thakkar1 /><ref name=thakkar2>{{Citation|last=Thakkar|first=Mohit|title=Adding Server-Side Rendering to Your React Application|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_4|work=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|pages=139–152|editor-last=Thakkar|editor-first=Mohit|place=Berkeley, CA|publisher=[[Apress]]|language=en|doi=10.1007/978-1-4842-5869-9_4|isbn=978-1-4842-5869-9|s2cid=216333955|access-date=2020-10-20}}</ref> Next.js is one of the most popular frameworks for React.<ref>{{Cite web|first=Matt|last=Asay|title=Why front-end development may be the new frontier|url=https://www.techrepublic.com/article/why-front-end-development-may-be-the-new-frontier/|access-date=2020-10-20|website=[[TechRepublic]]|date=2 December 2019|language=en}}</ref> It is one of several recommended "toolchains" available when starting a new app, all of which provide a layer of abstraction to aid in common tasks.<ref name="SmashingStyle">{{Cite web |last=Lukman |first=Adebiyi Adedotun |date=2020-09-17 |title=Comparing Styling Methods In Next.js |url=https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/ |access-date=2020-10-20 |website=[[Smashing Magazine]] |language=en}}</ref> Next.js requires [[Node.js]] and can be initialized using [[Node Package Manager]].
Next.js is a [[React (web framework)|React]] framework that enables several extra features, including [[server-side scripting|server-side rendering]] and generating [[static web page|static website]]s.<ref name=compareStatic>{{Cite web|date=2020-07-02|title=Differences Between Static Generated Sites And Server-Side Rendered Apps|url=https://www.smashingmagazine.com/2020/07/differences-static-generated-sites-server-side-rendered-apps/|access-date=2020-10-19|website=[[Smashing Magazine]]|language=en}}</ref> React is a [[JavaScript library]] that is traditionally used to build web applications rendered in the client's browser with JavaScript.<ref name=thakkar1>{{Citation|last=Thakkar|first=Mohit|title=Next.js|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_3|work=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|pages=93–137|editor-last=Thakkar|editor-first=Mohit|place=Berkeley, CA|publisher=[[Apress]]|language=en|doi=10.1007/978-1-4842-5869-9_3|isbn=978-1-4842-5869-9|s2cid=241224880|access-date=2020-10-20}}</ref> Developers recognize several problems with this strategy however, such as not catering to users who do not have access to JavaScript or have disabled it, potential security issues, significantly extended page loading times, and harm to the site's overall [[search engine optimization]].<ref name=thakkar1 /> Frameworks such as Next.js sidestep these problems by allowing some or all of the website to be rendered on the server-side before being sent to the client.<ref name=thakkar1 /><ref name=thakkar2>{{Citation|last=Thakkar|first=Mohit|title=Adding Server-Side Rendering to Your React Application|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_4|work=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|pages=139–152|editor-last=Thakkar|editor-first=Mohit|place=Berkeley, CA|publisher=[[Apress]]|language=en|doi=10.1007/978-1-4842-5869-9_4|isbn=978-1-4842-5869-9|s2cid=216333955|access-date=2020-10-20}}</ref> Next.js is one of the most popular frameworks for React.<ref>{{Cite web|first=Matt|last=Asay|title=Why front-end development may be the new frontier|url=https://www.techrepublic.com/article/why-front-end-development-may-be-the-new-frontier/|access-date=2020-10-20|website=[[TechRepublic]]|date=2 December 2019|language=en}}</ref> It is one of several recommended "toolchains" available when starting a new app, all of which provide a layer of abstraction to aid in common tasks.<ref name="SmashingStyle">{{Cite web |last=Lukman |first=Adebiyi Adedotun |date=2020-09-17 |title=Comparing Styling Methods In Next.js |url=https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/ |access-date=2020-10-20 |website=[[Smashing Magazine]] |language=en}}</ref> Next.js requires [[Node.js]] and can be initialized using [[Node Package Manager]].


Google has contributed to the Next.js project, including 43 pull requests in 2019.<ref name="insiders">{{Cite web |last=Asay |first=Matt |date=February 1, 2020 |title=An insider's look at Google's web framework contributions to Next.js and more |url=https://www.techrepublic.com/article/insiders-look-at-googles-web-framework-contributions-to-next-js-and-more/ |access-date=2020-10-19 |website=[[TechRepublic]] |language=en-US}}</ref> As of March 2022, the framework is used by many large websites, including [[Walmart]], [[Apple_Inc|Apple]], [[Nike,_Inc.|Nike]], [[Netflix]], [[TikTok]], [[Uber]], [[Lyft]], and [[Starbucks]].<ref name=thakkar1 /> In early 2020, Vercel secured twenty-one million dollars in Series A funding to support improvements to the software.<ref name=simplify /> The framework's original author, Guillermo Rauch, is currently the CEO of Vercel, and the project's lead maintainer is Tim Neutkens.<ref>{{Cite web |last=Donovan |first=Ryan |date=2020-10-07 |title=Static site generation with single page app functionality? That's what's coming Next(.js) |url=https://stackoverflow.blog/2020/10/07/qa-with-the-creators-of-next-js-on-version-9-5/ |access-date=2020-10-20 |website=Stack Overflow Blog |language=en-US |format=html}}</ref>
Google has contributed to the Next.js project, including 43 pull requests in 2019.<ref name="insiders">{{Cite web |last=Asay |first=Matt |date=February 1, 2020 |title=An insider's look at Google's web framework contributions to Next.js and more |url=https://www.techrepublic.com/article/insiders-look-at-googles-web-framework-contributions-to-next-js-and-more/ |access-date=2020-10-19 |website=[[TechRepublic]] |language=en-US}}</ref> As of March 2022, the framework is used by many large websites, including [[Walmart]], [[Apple_Inc|Apple]], [[Nike,_Inc.|Nike]], [[Netflix]], [[TikTok]], [[Uber]], [[Lyft]], and [[Starbucks]].<ref name=thakkar1 /> In early 2020, Vercel raised $21 million in Series A funding to support improvements to the software.<ref name=simplify /> The framework's original author, Guillermo Rauch, is currently the CEO of Vercel, and the project's lead maintainer is Tim Neutkens.<ref>{{Cite web |last=Donovan |first=Ryan |date=2020-10-07 |title=Static site generation with single page app functionality? That's what's coming Next(.js) |url=https://stackoverflow.blog/2020/10/07/qa-with-the-creators-of-next-js-on-version-9-5/ |access-date=2020-10-20 |website=Stack Overflow Blog |language=en-US |format=html}}</ref>


== Development history ==
== Development history ==

Revision as of 00:38, 4 March 2024

Next.js
Original author(s)Guillermo Rauch[1]
Developer(s)Vercel and the open-source community[2]
Initial releaseOctober 25, 2016; 8 years ago (2016-10-25)[3]
Stable release
15.0.0[4] Edit this on Wikidata / 21 October 2024; 13 days ago (21 October 2024)
Preview release
v13.3.1-canary.03
Repositorygithub.com/vercel/next.js
Written inJavaScript, TypeScript, and Rust
PlatformWeb platform
Size17.0 MB
TypeWeb application framework
LicenseMIT License
Websitenextjs.org

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

React documentation mentions Next.js among "Recommended Toolchains" advising it to developers when "building a server-rendered website with Node.js".[5] Where traditional React apps can only render their content in the client-side browser, Next.js extends this functionality to include applications rendered on the server-side.

The copyright and trademarks for Next.js are owned by Vercel,[6] which also maintains and leads its open-source development.[7]

Background

Next.js is a React framework that enables several extra features, including server-side rendering and generating static websites.[8] React is a JavaScript library that is traditionally used to build web applications rendered in the client's browser with JavaScript.[9] Developers recognize several problems with this strategy however, such as not catering to users who do not have access to JavaScript or have disabled it, potential security issues, significantly extended page loading times, and harm to the site's overall search engine optimization.[9] Frameworks such as Next.js sidestep these problems by allowing some or all of the website to be rendered on the server-side before being sent to the client.[9][10] Next.js is one of the most popular frameworks for React.[11] It is one of several recommended "toolchains" available when starting a new app, all of which provide a layer of abstraction to aid in common tasks.[12] Next.js requires Node.js and can be initialized using Node Package Manager.

Google has contributed to the Next.js project, including 43 pull requests in 2019.[13] As of March 2022, the framework is used by many large websites, including Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, and Starbucks.[9] In early 2020, Vercel raised $21 million in Series A funding to support improvements to the software.[1] The framework's original author, Guillermo Rauch, is currently the CEO of Vercel, and the project's lead maintainer is Tim Neutkens.[14]

Development history

Next.js was first released as an open-source project on GitHub on October 25, 2016.[3] It was originally developed based on six principles: out-of-the-box functionality requiring no setup, JavaScript everywhere, all functions are written in JavaScript, automatic code-splitting and server-rendering, configurable data-fetching, anticipating requests, and simplifying deployment.[15]

Next.js 2.0 was announced in March 2017 including several improvements that made it easier to work with small websites. It also increased the build efficiency and improved the scalability of the hot-module replacement feature.[16]

Version 7.0 was released in September 2018 with improved error handling and support for React's context API for improved dynamic route handling. This was also the first version to upgrade to Webpack 4.[17]

Version 8.0 was released in February 2019 and was the first version to offer serverless deployment of applications, in which the code is split up into lambda functions that are run on demand. The version also reduced the time and resources required for static exports and improved prefetch performance.[18]

Version 9.3, announced in March 2020, included various optimizations and global Sass and CSS module support.[19]

On July 27, 2020 Next.js version 9.5 was announced, adding new capabilities including incremental static regeneration, rewrites, and redirect support.[20]

On June 15, 2021 Next.js version 11 was released, introducing among others: Webpack 5 support, preview of real-time collaborative coding functionality "Next.js Live", and experimental function of automatic conversion from Create React App to Next.js compatible form "Create React App Migration".[21]

On October 26, 2021, Next.js 12 was released, adding a Rust compiler, making the compilation faster, AVIF support, Edge Functions & Middleware, and Native ESM & URL Imports.[22]

On October 26, 2022, Vercel released Next.js 13. This major release brought about a new routing pattern in beta, with the addition of the App Router that includes support for layouts, React Server Components, streaming, and a new set of data fetching methods. Furthermore, Vercel announced a new toolchain for front-end development called Turbo, including Turbopack as a successor to Webpack, Turborepo for incremental build systems.[23]

In May 2023, Vercel released Next.js 13.4. This brought with it the stable version of App Router, which allows developers to use it in production.[24]

In October 2023, Vercel released Next.js 14. Which comes with improve memory management with using edge runtime.[25]

In December 2023, Vercel released Next.js 14.0.4, alongside lot of latest features, such as Track server requests and memory usage.[26]

Styling and features

Next.js supports styling with CSS as well as precompiled Scss and Sass, CSS-in-JS, and styled JSX.[12] In addition, it is built with TypeScript support and smart bundling.[27] The open-source transpiler SWC is used to transform and compile code into JavaScript usable by a browser.[28] Webpack, another open-source tool, is used to bundle the modules afterward, however it is currently being replaced with TurboPack.[29] All of these tools are used with npm in a terminal.[13]

The main feature of Next.js is its use of server-side rendering to reduce the burden on web browsers and provide enhanced security[citation needed]. This can be done for any part of the application or the entire system, allowing for content-rich pages to be singled out for server-side rendering.[9] It can also be done only for first-time visitors, to reduce the burden on web browsers that have yet to download any of the site's assets.[10] The "hot reloading" feature detects changes as they are made and re-renders the appropriate pages so the server avoids the need to be restarted. This allows changes made to the application code to be immediately reflected in the web browser, though some browsers will require the page to be refreshed.[9] The software uses page-based routing for developer convenience and includes support for dynamic routing. Other features include hot-module replacement so that modules can be replaced live, automatic code splitting, which only includes code necessary to load the page, and page prefetching to reduce load time.[9]

Next.js also supports Incremental Static Regeneration[30] and static site generation - a compiled version of the website is usually built during build time and saved as a .next folder. When a user makes a request, the pre-built version which are static HTML pages are cached and sent to them. This makes the load time very fast, but it's not suitable for every website, particularly for interactive sites that change often and utilize a lot of user input.

See also

References

  1. ^ a b Asay, Matt (21 April 2020). "How Next.js aims to simplify front-end development". TechRepublic. Archived from the original on 2020-06-03. Retrieved 2020-10-20.{{cite web}}: CS1 maint: bot: original URL status unknown (link)
  2. ^ "vercel/next.js". GitHub. Archived from the original on 2019-03-16. Retrieved 2019-03-17.
  3. ^ a b "Next.js First Release". GitHub. 2019-03-14. Archived from the original on 2020-10-10. Retrieved 2019-03-17.
  4. ^ "Release 15.0.0". 21 October 2024. Retrieved 22 October 2024.
  5. ^ "Recommended Toolchains" (HTML). React documentation. Retrieved 10 July 2021.
  6. ^ Next.js Brand Guidelines, 26 August 2022
  7. ^ "Develop. Preview. Ship. For the best frontend teams – Vercel" (HTML). vercel.com. Archived from the original on 2021-10-06. Retrieved 2020-09-22.
  8. ^ "Differences Between Static Generated Sites And Server-Side Rendered Apps". Smashing Magazine. 2020-07-02. Retrieved 2020-10-19.
  9. ^ a b c d e f g Thakkar, Mohit (2020), Thakkar, Mohit (ed.), "Next.js", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications, Berkeley, CA: Apress, pp. 93–137, doi:10.1007/978-1-4842-5869-9_3, ISBN 978-1-4842-5869-9, S2CID 241224880, retrieved 2020-10-20
  10. ^ a b Thakkar, Mohit (2020), Thakkar, Mohit (ed.), "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, pp. 139–152, doi:10.1007/978-1-4842-5869-9_4, ISBN 978-1-4842-5869-9, S2CID 216333955, retrieved 2020-10-20
  11. ^ Asay, Matt (2 December 2019). "Why front-end development may be the new frontier". TechRepublic. Retrieved 2020-10-20.
  12. ^ a b Lukman, Adebiyi Adedotun (2020-09-17). "Comparing Styling Methods In Next.js". Smashing Magazine. Retrieved 2020-10-20.
  13. ^ a b Asay, Matt (February 1, 2020). "An insider's look at Google's web framework contributions to Next.js and more". TechRepublic. Retrieved 2020-10-19.
  14. ^ Donovan, Ryan (2020-10-07). "Static site generation with single page app functionality? That's what's coming Next(.js)" (html). Stack Overflow Blog. Retrieved 2020-10-20.
  15. ^ Krill, Paul (2016-10-31). "Next step after Node.js: Framework for 'universal' JavaScript apps". InfoWorld. Retrieved 2020-10-20.
  16. ^ Krill, Paul (2017-03-28). "Next.js 2.0 plays better with React and JavaScript". InfoWorld. Retrieved 2020-10-20.
  17. ^ Krill, Paul (2018-09-21). "Next.js 7 framework compiles faster, supports WebAssembly". InfoWorld. Retrieved 2020-10-20.
  18. ^ Krill, Paul (2019-02-14). "Next.js 8 now supports serverless apps". InfoWorld. Retrieved 2020-10-20.
  19. ^ Krill, Paul (2020-03-12). "Next.js upgrade emphasizes static site generation". InfoWorld. Retrieved 2020-10-20.
  20. ^ Krill, Paul (July 27, 2020). "Next.js adds incremental static pages regeneration". InfoWorld. Archived from the original on October 2, 2020. Retrieved September 22, 2020.
  21. ^ "Next.js 11". Retrieved 2021-07-10.
  22. ^ "Next.js 12". nextjs.org. Retrieved 2021-10-27.
  23. ^ Orbán, Balázs (2022-10-25). "Next.js 13". nextjs.org. Retrieved 2023-06-09.
  24. ^ Markbåge, Sebastian, Tim Neutkens (2023-05-04). "Next.js 13.4". nextjs.org. Retrieved 2023-06-07.{{cite web}}: CS1 maint: multiple names: authors list (link)
  25. ^ "Next.js 14.0.0". nextjs.org. 2023-12-08. Retrieved 2023-11-26.
  26. ^ "Next.js 14.0.4". nextjs.org. 2023-12-08. Retrieved 2023-12-19.
  27. ^ Krill, Paul (February 14, 2019). "Next.js 8 now supports serverless apps". InfoWorld. Archived from the original on October 2, 2020. Retrieved September 22, 2020.
  28. ^ "Architecture: Next.js Compiler | Next.js". nextjs.org. Retrieved 2023-08-19.
  29. ^ "Architecture: Turbopack | Next.js". nextjs.org. Retrieved 2023-08-19.
  30. ^ "Incremental Static Regeneration with Next.js". Vercel. Retrieved 2022-03-06.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Next.js&oldid=1211707665"