Next.js: Difference between revisions

Revision as of 01:10, 26 July 2024

Latest revision as of 17:03, 27 July 2025

(36 intermediate revisions by 27 users not shown)

Line 2:

{{Infobox software

| name = Next.js

| logo = nextjs-logoNext.js wordmark.svg

| logo class = skin-invert

| logo alt = The Next.js logo, a stylization of its name

| logo captionalt = The Next.js Logowordmark

| logo caption = Vercel Next.js wordmark

| author = Guillermo Rauch<ref name=simplify>{{Cite web|first=Matt|last=Asay|title=How Next.js aims to simplify front-end development|url=https://www.techrepublic.com/article/how-next-js-aims-to-simplify-front-end-development/|access-date=2020-10-20|website=[[TechRepublic]]|date=21 April 2020|language=en|archive-date=2020-06-03|archive-url=https://web.archive.org/web/20200603082105/https://www.techrepublic.com/article/how-next-js-aims-to-simplify-front-end-development/|url-status=dead}}</ref>

| developerauthor = [[Vercel]] and the open-sourceGuillermo communityRauch<ref name=simplify>{{Citecite web |first=Matt |last=Asay |title=How Next.js aims to simplify front-end development |url=https://githubwww.techrepublic.com/vercelarticle/how-next.-js|title=vercel-aims-to-simplify-front-end-development/next.js|website=GitHub |access-date=20192020-0310-1720 |website=[[TechRepublic]] |date=21 April 2020 |language=en |archive-date=20192020-0306-1603 |archive-url=https://web.archive.org/web/2019031603513120200603082105/https://githubwww.techrepublic.com/vercelarticle/how-next.-js-aims-to-simplify-front-end-development/ |url-status=livedead}}</ref>

| releaseddeveloper = {{Start date[[Vercel]] and age|2016|10|25}}the open-source community<ref name=originalRelease>{{Citecite web |url=https://github.com/vercel/next.js/releases/tag/1.0.0 |title=Nextvercel/next.js First Release|website=GitHub|date=2019-03-14 |access-date=2019-03-17 |archive-date=20202019-1003-1016 |archive-url=https://web.archive.org/web/2020101023211520190316035131/https://github.com/vercel/next.js/releases/tag/1.0.0 |url-status=live}}</ref>

| released = {{start date and age|2016|10|25}}<ref name=originalRelease>{{cite web |url=https://github.com/vercel/next.js/releases/tag/1.0.0 |title=Next.js First Release |website=GitHub |date=2019-03-14 |access-date=2019-03-17 |archive-date=2020-10-10 |archive-url=https://web.archive.org/web/20201010232115/https://github.com/vercel/next.js/releases/tag/1.0.0 |url-status=live}}</ref>

| latest release version = {{wikidata|property|edit|reference|P348}}

| latest release date = {{start date and age|{{wikidata|qualifier|P348|P577}}}}

| latest preview version = v14v15.34.0-canary.474 <ref>{{cite web |url=https://github.com/vercel/next.js/releases/tag/v15.4.0-canary.74 |title=ReleasesRelease v15.4.0-canary.74 · vercel/next.js |website=GitHub |publisher=Vercel |access-date=2024-04-16 |archive-url=https://web.archive.org/web/20240416120231/https://github.com/vercel/next.js/releases |archive-date=20242025-0406-1610 }}</ref>

| repo = {{URL|https://github.com/vercel/next.js}}

| programming language = [[JavaScript]], [[TypeScript]], and [[Rust (programming language)|Rust]]

| platform = [[Web platform]]

| size = 17.0 [[Megabyte|MB]]

| genre = [[Web application framework]]

| license = [[MIT License]]

| website = {{Official URL|https://nextjs.org}}

}}

'''Next.js''' is an [[open-source]] [[Web framework|web development framework]] created by the private company [[Vercel]] providing [[React (JavaScript librarysoftware)|React]]-based web applications with [[server-side scripting|server-side rendering]] and [[static web page|static websiterendering]] generation.

React documentation mentions Next.js among "Recommended Toolchains" advising it to developers when "building a server-rendered website with Node.js".<ref name="React documentation">{{cite web |title=Recommended Toolchains |url=https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains |access-date=10 July 2021 |website=React documentation |language=en-US |format=HTML}}</ref> 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,<ref>{{Citationcite web |url=https://vercel.com/design/brands#next.js |title=Next.js Brand Guidelines |date=26 August 2022}}</ref> which also maintains and leads its open-source development.<ref>{{Citecite web |title=Develop. Preview. Ship. For the best frontend teams – Vercel |url=https://vercel.com/home |url-status=live |archive-url=https://web.archive.org/web/20211006015250/https://vercel.com/home |archive-date=2021-10-06 |access-date=2020-09-22 |website=vercel.com |language=en-US |format=HTML}}</ref>

== Background ==

Next.js is a [[React (web frameworksoftware)|React]] framework that enables several extra features, including [[server-side scripting|server-side rendering]] and generating [[static web page|static websiterendering]]s.<ref name=compareStatic>{{Citecite 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>{{Citationcite web |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>{{Citationcite web |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>{{Citecite 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">{{Citecite 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 Managernpm]].

[[Google]] has contributed to the Next.js project, including 43 pull requests in 2019.<ref name="insiders">{{Citecite 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 MarchOctober 20222024, the framework is used by many large websites, including [[Walmart]], [[Apple_IncApple Inc|Apple]], [[Nike,_Inc Inc.|Nike]], [[Netflix]], [[TikTok]], [[Uber]], [[Lyft]], [[Starbucks]] and [[StarbucksSpotify]].<ref name=thakkar1 /><ref>{{cite web |title=Spotify.com Technology Stack |url=https://www.wappalyzer.com/lookup/spotify.com/ |website=Wappalyzer |access-date=15 October 2024}}</ref> 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>{{Citecite 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 ==

Line 36 ⟶ 35:

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.<ref>{{Cite web|last=Krill|first=Paul|date=2017-03-28|title=Next.js 2.0 plays better with React and JavaScript|url=https://www.infoworld.com/article/3185385/nextjs-20-plays-better-with-react-and-javascript.html|access-date=2020-10-20|website=[[InfoWorld]]|language=en}}</ref>

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.<ref>{{Cite web |last=Krill |first=Paul |date=2018-09-21 |title=Next.js 7 framework compiles faster, supports WebAssembly |url=https://www.infoworld.com/article/3307190/nextjs-7-framework-compiles-faster-supports-webassembly.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en-US}}</ref>

Version 8.0 was released in February 2019 and was the first version to offer [[Serverless computing|serverless]] deployment of applications, in which the code is split up into [[lambda function (computer programming)|lambda function]]s that are run on demand. The version also reduced the time and resources required for static exports and improved [[Prefetch input queue|prefetch]] performance.<ref>{{Cite web |last=Krill |first=Paul |date=2019-02-14 |title=Next.js 8 now supports serverless apps |url=https://www.infoworld.com/article/3340817/nextjs-8-now-supports-serverless-apps.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en-US}}</ref>

Version 9.3, announced in March 2020, included various optimizations and global [[Sass (stylesheet language)|Sass]] and CSS module support.<ref>{{Cite web|last=Krill|first=Paul|date=2020-03-12|title=Next.js upgrade emphasizes static site generation|url=https://www.infoworld.com/article/3532316/nextjs-upgrade-emphasizes-static-site-generation.html|access-date=2020-10-20|website=[[InfoWorld]]|language=en}}</ref>

Line 46 ⟶ 45:

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".<ref>{{cite web|title=Next.js 11|url=https://nextjs.org/blog/next-11|accessdate=2021-07-10}}</ref>

On October 26, 2021, Next.js 12 was released, adding a [[Rust (programming language)|Rust]] compiler, making the compilation faster, [[AVIF]] support, Edge Functions & Middleware, and Native ESM & URL Imports.<ref>{{Cite web|title=Next.js 12|url=https://nextjs.org/blog/next-12|access-date=2021-10-27|website=nextjs.org|language=en}}</ref>

On October 26, 2022, Vercel released Next.js 13. This major release brought about a new routing pattern in [[Software release life cycle|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 (build system)|incremental build]] systems.<ref>{{Cite web |last=Orbán |first=Balázs |date=2022-10-25 |title=Next.js 13 |url=https://nextjs.org/blog/next-13 |access-date=2023-06-09 |website=nextjs.org |language=en-US}}</ref>

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.<ref>{{Cite web|last1=Markbåge|first1=Sebastian|last2=Neutkens|first2=Tim|date=2023-05-04|title=Next.js 13.4|url=https://nextjs.org/blog/next-13-4|access-date=2023-06-07|website=nextjs.org|language=en-US}}</ref>

In October 2023, Vercel released Next.js 14., Whichwhich comes with improveimproved memory management with using edge runtime.<ref name=":0">{{Cite web |last= |first= |date=2023-12-08 |title=Next.js 14.0.0 |url=https://github.com/vercel/next.js/releases/tag/v14.0.0 |access-date=2023-11-26 |website=nextjs.org |language=en-US}}</ref>

In October 2024, Vercel released Next.js 15. It introduces the Rust-based bundler Turbopack (which is faster than Webpack), support for the React 19, and asynchronous request APIs.<ref>{{Cite web |last= |first= |date=2023-12-08 |title=Next.js 14.0.0 |url=https://github.com/vercel/next.js/releases/tag/v15.0.0 |access-date=2023-11-26 |website=nextjs.org |language=en-US}}</ref><ref>{{Cite web |date=2024-10-24 |title=Next.js 15 arrives with faster bundler |url=https://www.infoworld.com/article/3587112/next-js-15-arrives-with-faster-bundler.html |access-date=2025-04-14 |website=InfoWorld |language=en-US}}</ref>

== Styling and features ==

Line 72 ⟶ 73:

== External links ==

* [https://nextjs.org Official site]

* {{Cite web|title=Case Study - Hulu {{!}} Next.js|url=https://nextjs.org/case-studies/hulu|access-date=2020-10-16|website=nextjs.org|language=en}}

* {{Cite web|last=Smith|first=Craig S.|title=Have You Noticed The New Web? It's Faster, More Secure|url=https://www.forbes.com/sites/craigsmith/2020/04/21/have-you-noticed-the-new-web-its-faster-more-secure/|access-date=2020-10-16|website=Forbes|language=en}}

* {{Cite web|last=Asay|first=Matt|title=Front-end frameworks are about to get even cooler, says Google lead|url=https://www.techrepublic.com/article/front-end-frameworks-are-about-to-get-even-cooler-says-google-lead/|access-date=2020-10-16|website=[[TechRepublic]]|date=3 April 2020|language=en}}

* {{Cite web|last=Asay|first=Matt|date=2020-06-01|title=How GraphQL turned web development on its head|url=https://www.infoworld.com/article/3545951/how-graphql-turned-web-development-on-its-head.html|access-date=2020-10-20|website=[[InfoWorld]]|language=en}}

{{Web frameworks}}

[[Category:Web frameworks]]

[[Category:JavaScript web frameworks]]

[[Category:Software using the MIT license]]