Next.js: Difference between revisions

Revision as of 14:25, 4 April 2024

Revision as of 12:30, 5 April 2024

Line 44:

On July 27, 2020 Next.js version 9.5 was announced, adding new capabilities including incremental static regeneration, rewrites, and redirect support.<ref>{{Cite web|url=https://www.infoworld.com/article/3568468/nextjs-adds-incremental-static-pages-regeneration.html|title=Next.js adds incremental static pages regeneration|first=Paul|last=Krill|date=July 27, 2020|website=[[InfoWorld]]|access-date=September 22, 2020|archive-date=October 2, 2020|archive-url=https://web.archive.org/web/20201002003602/https://www.infoworld.com/article/3568468/nextjs-adds-incremental-static-pages-regeneration.html|url-status=live}}</ref>

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|date=15 June 2021 |url=https://nextjs.org/blog/next-11|accessdate=2021-07-10}}</ref>

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.<ref>{{Cite web|title=Next.js 12|url=https://nextjs.org/blog/next-12|access-date=2021-10-27|website=nextjs.org|date=26 October 2021 |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 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>

Line 58:

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|date=August 2021}}. 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.<ref name=thakkar1 /> 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.<ref name=thakkar2 /> 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.<ref name=thakkar1 /> 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.<ref name=thakkar1 />

Next.js offers features such as getStaticProps and getServerSideProps to retrieve data either during the build process or with each request, providing versatility for various types of content. It also offers automatic image optimization for various screen sizes and devices, improving website performance and user experience<ref>{{Cite web |date=12 Mar, 2024 |title=getting-started-with-next-js |url=https://www.geeksforgeeks.org/getting-started-with-next-js/ |access-date=4 April 2024 |website=GFG}}</ref>

Next.js also supports Incremental Static Regeneration<ref>{{Cite web |title=Incremental Static Regeneration with Next.js |url=https://vercel.com/docs/concepts/next.js/incremental-static-regeneration |access-date=2022-03-06 |website=Vercel |language=en-US}}</ref> 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.