Next.js 10 featured e-commerce kit and performance analytics

Next.js 10 featured e-commerce kit and performance analytics

The tenth release of the popular React framework is a gold piece, especially for developers working in e-commerce. These are the most exciting innovations.

The popular React framework Next.js for creating server-side rendered React apps has been around since 2016. It is now used in many development teams around the world. For example with Netflix, Tiktok or Hulu – and incidentally also with t3n.

One of the most exciting new features is the Next.js Commerce-Kit, an all-in-one starter kit for creating high-performance e-commerce pages. Vercel developed the kit in collaboration with Bigcommerce. With just a few simple steps, developers can click together an online shop – simply clone the repo, deploy it and customize it as required.

Site performance is one of the most important success factors, not only, but especially for e-commerce providers. If the loading process takes longer than three seconds, apparently more than 50 percent of all users leave a website that has just been visited. However, the reasons for poor performance are not always obvious. Possible causes are, for example, fonts, scripts from third-party providers or video or image files that are too large.

The new analytics feature in Next.js 10 should help to solve this problem: It allows the continuous measurement of the performance of an application. The analysis tool not only measures the app performance on your own devices, but also on the end devices of the users. In future, developers should receive a valid overall impression of the performance of their application.

Internationalized routing

The localization of web content is an important success factor. Most people prefer, for example, product descriptions in their native language. The two most important factors in internationalizing a project are its localization – the term describes the preparation of content for the respective target cultures and languages ​​- and routing. Many React libraries have features that aid in building a multilingual application, but most of them require developers to do the routing manually. According to the blog post for the release, Next.js 10 offers internationalized routing and a speech recognition feature. The routing feature for the internationalization of your applications supports the hybrid approach of Next.js. This means that you can choose between static page generation and server rendering for each page, even for internationalized web projects. For routing you can choose between subpath routing and domain routing. For both strategies, developers must first configure so-called UTS Locale Identifiers – or Locales. Such an identifier consists of language-region-script, whereby the information region and script are voluntary. en-US for example would be the locale identifier for US English.


// next.config.js

module.exports = {
i18n: {
locales: [‘en’, ‘nl’],
defaultLocale: ‘en’
}
}

 

Only then can you decide on one of the two routing methods. Details on this as well as on all other innovations, including

  • Support for React 17
  • Fast refresh for MDX
  • automatic resolving of the hrefAttribute
  • and a new image component for the automated optimization of image files

can be found on the Vercel blog.

You might be interested in that too

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png