What’s new in Next.js 10.2

Next.js is a framework for building React web applications, super-fast static websites, and single-page JavaScript applications. It was designed to help solve common problems associated with React development, including production optimizations such as code splitting, code bundlers (webpack), and code compilers (Babel).

Next.js is also gaining popularity for its superior developer experience and many built-in features, notably automatic code splitting for faster page loading and client-side routing with optimized prefetching.

On 28 April 2021, the Next.js team announced the release of Next.js 10.2 with even more attractive new features. The new release enables developers to build hybrid applications containing both server-rendered and statically generated pages.

In this guide, we’ll take a look at the new features included in Next.js 10.2, namely:

• Accelerated builds and refresh
• Faster startup
• Improved accessibility
• More flexible redirects and rewrites
• Automatic webfont optimization Accelerated builds and refresh

Next.js 10.2 introduces faster builds and refresh enabled through webpack 5. With this improvement, any application that does not use a custom webpack configuration in its next.config.js will automatically use webpack 5 when enabled.

In addition, any Next.js application that has webpack 5 enabled will have access to a host of improved features including disk caching, fast refresh, long-term caching of assets, and tree shaking

Faster startup

A major goal of the latest Next.js release is to accelerate the local development experience to near-real-time speed after the first run on the local server. According to the official blog post, Next.js 10.2 boosts startup performance over the original Next.js CLI by 24 percent. For example, the next dev command for vercel.com decreased from 3.3 seconds to 2.5 seconds.

Previously, running next dev in the local terminal to start up the local server for development mode took a long time to load. Next.js 10.2 makes this process much faster and more developer-friendly.

More accessibile route changes

Route changes are now announced to screen readers by default, in addition to other assistive technology designed to improve accessibility. By accessibility, we mean features that are designed to be usable by as many people as possible. This commonly applies to users with disabilities, but it can also refer to designing features and content for the benefit of users with slow network connections, those using certain types of devices, etc.

More flexible redirects and rewrites

The Next.js team designed redirects and rewrites to be more flexible in the new version. This is mostly thanks to its support for the new has property, which enables you to match against incoming headers, cookies, and query strings.

With redirects, you can divert an incoming request to a different destination path. Rewrites enable you to map an incoming request. The has property takes the following:

• type: String, the value of which must be either header, cookie, host, or query
• key: ``String, which enables you to pass the key from the selected type you want to match against

Below is an example of different selected types we could match against:

// next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
          }
        ],
        destination: '/old-browser',
        permanent: false
      }
    ]
  }
}

The code above shows an example of how to redirect an old browser based on its U

ser-Agent:

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB'
          }
        ],
        destination: '/uk/:path*',
        permanent: true
      }
    ]
  }
}

You can also redirect a user if the app needs to detect the user based on their location:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)'
          }
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false
      }
    ]
  }
}

Let’s say you’re working on a web app that requires a user to create an account and you need to redirect the user if they are logged in. With the new, improved, more flexible redirects in Next.js 10.2, this is a piece of cake.

Automatic Webfont Optimisation

When talking about WebFont, we are talking about those font that can not be pre-installed and must be downloaded by the browser before they are displayed on the website or webapp as the case may be. And 82% of web pages for desktop use web fonts and 80% of mobile page uses web font when working on mobile screens. Though sometimes we customise our own fonts when we are working on branding or when working on design screens for website. It usage fairly consistent around the world, with some few outliers.

The release of Next.js 10.2 has made it more developer friendly due to its supports to Automatic Webfont Optimization when working with web font not our own custom font. And the cool thing is that the Automatic Webfont Optimization currently supports Google Fonts.

But by default next.js still automatically inline font CSS during build time in our app developement.

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

The above example shows how it was implement in our web app or websites before the release of Next.js 10.2

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

Now if we look at the example above, we are going to notice the change between the first usage of google fonts and the second one. In the first example we added the link the normal way we normally use it in web apps or any websites passing it using the link tag.

But now the release of Next.js has made it available for us to use it directly or together with the style tag. We can see that on the second example, the way we passed the google font using the data-href attribute for style tag.

What the attribute does is that, it automatically optimise the webfont before the page finish loading together with the style.

Conclusion

The release of Next.js 10.2 brought about many update and improvement to the framework, and we were able to look at the improvement one after another. The cool thing about this framework I like on much it the Automatic webfont optimisation feature that was added to the new version. This upgrade was Introduced April 28, Next.js 10.2. And another cool thing is that, its use of Webpack 5 helped in improving disk caching, which allowed the compiler to persist work between build runs files. That is because only the changed files will be recompiled after that.