itb-nz logo
Story image

Next.js React framework updated to deliver modern web experience

28 Oct 2020

As the Next.js User Conference wraps up this week, one of the most promising announcements from the event is based around significant updates to Next.js 10.

Next.js is a React framework used to power websites and web applications. Companies including Apple, Twitch, TikTok, Lululemon, Target, Lyft and Hulu have used Next.js to develop their front ends.

A Next.js developer, Versel, says the new updates include automatic language detection, automatic image optimisation, internationalised routing, quick start e-commerce capabilities, and continuous Web Vitals analytics.

Vercel developed the updated Next.js version in collaboration with more than 1300 open source contributors, as well as partners including Facebook and Google.

Vercel CEO Guillermo Rauch says that the modern website relies on performance - and it is that which determines whether a site succeeds or fails.

 “Next.js 10 addresses the most critical pain points developers face when optimising their workflows and websites to deliver high quality, highly-performant content at scale. By enabling a true develop-preview-ship-iterate workflow, Next.js 10 makes it easier than ever for them to achieve excellence in web development and helps assure them that their users will have the highest quality web experiences possible, wherever they may be in the world.”

Vercel adds, “Next.js’ incremental static generation gives users all the capabilities of a static generator, with the ability to add infinite numbers of pages and update them later without rebuilding the entire site.”

New Next.js 10 features include:

  • Next.js Analytics - Next.js 10 gives developers real-world continuous user insights that help developers understand exactly where to focus to improve site performance. This continuous feedback helps developers understand how the site or application performs for users and improves their Google Web Vitals scores. 
  • Automatic image optimisation - Next.js 10 gives developers a replacement for legacy HTML and browser image stacks, which support only one image size and type. With Next.js 10, developers can automatically, seamlessly and transparently replace legacy HTML image tags with a React-based image component through automatic progressive loading.
  • Internationalised routing and automatic language detection - Next.js 10 provides internationalised routing and gives teams clear paths for translation. This can remove DIY approaches by supporting language negotiation and memorisation out-of-the-box, while automatically determining what content to serve according to users’ language preferences.
  • Next.js Commerce - Vercel partnered with BigCommerce to release Next.js Commerce. It is an open source platform that gives all developers the performance, personalisation, customisation and modern experiences. It leverages and automates the implementation of common e-commerce site components, with a data layer and reusable data primitives provided by BigCommerce.