Next JS is the most ideal framework to use whenever you want to build an end-to-end experience on the web with React, it extends the power of React to the server-side with ease so that you can build full-stack applications. Next JS which was first released in October 2016 has now had 9 versions and iterations and this new version comes with some very exciting features we would take a look at.

Why choose Next JS?

You might be a React developer and used CRA to bootstrap your app and then going ahead to download and configure all the tools you need like the router. With Next JS the router comes out-of-the box without any config needed, as soon as you create a file in the pages folder, you have routing setup to it automatically. Next JS does server-side rendering also out-of-the-box too so whatever you build is easily findable and optimized for search engines like Google. It gets better, Next JS lets you work on the head section of your page by adding or removing meta tags. Another very impressive reason is lazy loading, Next JS has its own code-splitting approach that loads up content when you need it, providing a great user experience.

New features

In this post, we are going to look at the newest features shipped so far as the 10th version of Next JS and how all of it leads to you building and shipping great React apps with the best user experience.

Speed improvements

There are massive speed upgrades with this new version 10 as it is now connected to Facebook’s fast refresh which basically makes sure that only files updated get to re-render in your app and instantaneously without any loss of state. This makes Next JS 200ms faster on edits alone and refreshes get three times faster as well. The dependency graph for Next JS has also been recently optimized and a lot of packages updated on NPM, meaning now even installs got a speed boost. It gets even better, now all Next JS apps use Webpack 5 by default providing all the stated improvements with no bugs and an overall better experience due to Webpack updates around disk caching, tree shaking, and better assets management. After you have upgraded to webpack 5 in Next.js or run a new project, kindly share any feedback you might have with the Next team.

Custom 500 error page

Next JS now has the easiest way to show your users that there is a server error. Create a 500.js page in your pages folder, add your own twist to it just like the 404 page, and the static page will be published and generated at build.

// pages/500.js
export default function Custom500() {
    return <h1>500 - Server-side error occurred reload page</h1>
}

Docs Improvements

The Next JS documentation also got an update with new guides and resources to usher in new customers to using Next JS, a lot of these resources are around migration from other platforms as the demand for Next JS keeps growing wider and wider. Some of them include Migrating from Gatsby, Migrating from CRA, Migrating from React Router, and many others. Check out the Next JS doc here.

Image optimization

One of the main things that affect performance and is not so easy to optimize in a web application is assets such as images and videos. Images form almost half of all web content, and so optimizing them goes a very long way to improve experiences with applications. Images are unique because they are not usually compressed in an optimal way and they load all at once on the web and so the Next team decided to solve this. An image component in Next abstracts and enables images to be optimized without any input from you, the developer. Great right? All you have to do is replace the img element with Image from Next. Here is how it is done. Let’s say your image tag is like this:

<img src="/logo.png" width="5" height="8" alt="Project Logo">

Now with this new version, all you have to do is to import an Image like this:

import Image from 'next/image';
<Image src="/logo.png" width="5" height="8" alt="Project Logo">

The Image is a React component which was created to help improve image performance issues and experience on the web.

The Google Chrome team helped create this React Component to improve page performance by making best practices the default.

Let us call this component’s new powers the Built-in Image Optimization, by default images are now served in WebP, a smaller, better and more optimized image format than JPEG. Next JS adopts this automatically even from external data sources like a content management systems. Also, Next goes a step further to process image optimization on user request instead of at build time like HTML does, so this makes your build process very efficient as your build time for 10 images or 1000 images are essentially the same thing in this version.

Optimizing Webfonts

Webfonts are getting widespread with over 80% of web apps using them to stay consistent with their brand acrosss all devices. However, implementation of webfonts can affect performance so this new version of Next JS solves for that by supporting automatic Webfont optimization. The way this works is that as you start building with Next JS, font CSS will be put inline at build time so that no more font declarations can be fetched. Something like this:

// Before
<link
    href="https://fonts.googleapis.com/css2?family=Inter"
    rel="stylesheet"
/>
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
    @font-face{font-family:'Inter';font-style:normal.....
</style>

The Automatic Webfont Optimization already supports Google Fonts and other font providers are being added and more news would come in subsequent Next JS versions. In the works too are plans to control over loading strategies for webfonts and font-display values. This contributes to speed improvements without any extra work from you the developer.

E-commerce play

Next JS is committed to bring implementation of blazing fast React applications to the e-commerce industry. The Next JS Commerce is a great way to enter the space, and with Commerce the Next JS team have been working to make it more and more open to everyone regardless of your e-commerce provider. In this version, Next JS Commerce is now provider-agnostic in the user interface, you can go ahead to use any headless solution on Next JS commerce. Switching from your provider to Next JS is a matter of 1 single line edit in your config.

These are the Lighthouse metrics for Next.js Commerce, quite impressive if you ask me.

Now you can checkout the Shopify Demo in Next JS and see how within a few minutes any Next JS developer can start an E-Commerce store easily

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Conclusion

These are a few new features of the Next JS framework and you should check it out if you use React. You can update your version to the latest version with this line

$ npm i next@latest

I am mostly excited about the e-commerce domination at Next JS seeing as companies like Apple, Wal-Mart, McDonald’s, and Nike trust Next. What are you most excited about?