Theophilus Ngaribvume

This is Where i Share my Experiences, Ideas, and Thoughts. One Post a Day.


Next.js 12 Comes With New Dynamic Features

27 October, 2021 - 3 min read

Next.js 12 Comes With New Dynamic Features

Vercel, the company behind Next.js has introduced Next.js 12 with a number flashy features which are going to help build dynamic websites. They touted it as their biggest release ever.

New Features

  • Middlewares - this will make it easier for developers to provide user dynamic content by enabling flexibility in Next.js with code over configuration.
  • Rust Compiler - Comes with better faster refreshes and faster builds.
  • React 18 Support - Next.js native APIs are now supported.
  • <Image /> AVIF Support - 20% Smaller images
  • Bot Aware ISR Fallback - Optimised SEO for web crawlers.
  • Native ES Modules Support
  • URL Imports - import packages from any URLS, no install required.
  • React Server Components

If you need to update your Next.js site now, you can just run: 'npm i next@latest'

Jamstack and static sites became popular because they were empowering front-end developers to push to the edge But over the years, we started noticing that developers and consumers loved the speed of pre-rendered artifacts at the edge. But they didn’t love the constraints of static workloads, namely anything around user personalization, feature flags and A/B testing.

Vercel CEO Guillermo Rauch said.

When you’re running an A/B experiment, in the world before Middleware, your experiment would carry the bulk of both tests. I have the A test and the B test together. With Middleware, because we’re able to make these choices before that request gets served, we can say, ‘oh, here’s just A or here’s just B and C’ and you get that highly performant experiment

Kevin Van Gundy, Vercel’s CRO, explained.

Let's go over the new features.

Middlewares

This will enable developers to use code over configurations, you can write your functions which will run before a request is request, the function can then respond with a redirect or you can modify the response, or add headers.

Here is a list of middleware usages you can then explore with the new Next.js 12.

  • Authentication
  • Server-Side analytics
  • Redirects and rewrites
  • i18n routing
  • Logging
  • Bot protection

To use a middleware with Next.js 12, just create pages/middleware.js page.

Rust Compiler

The rust compilter helps next.js app build and refresh faster. ~3X faster refresh and ~5X faster builds. The other improvements are:

  • Speed improvements for large codebases.
  • Improved observability into performance.
  • Webpack improvements

Compiling code with Rust is 17X faster than babel.

URL Imports

This is an experimental feature for support ES Modules through urls, with no install required. The urls imports are then cached locally. Any URL from any CDN is said to work including no-code and design tools.

  • unpkg
  • JSPM
  • esm.sh
  • jsDelivr
  • Skypack

Smaller Images with AVIF Support

The next.js image component now supports AVIF images, this will enable 20% decrease in image sizes compared with webp. To allow AVIF image compilation add this to your next.config.js

module.exports = { images: { formats: ["image/avif", "image/webp"], }, }
Creator of Workly and Nerdlify, Currently working at Pindula.

© 2021, Theophilus Ngaribvume. All Rights Reserved.