Category Archives: React

5 Killer game-changing features in Next.js 12.

It was a while ago when the newest version of Next.js has released. Today we will look into the features that came with Next.js 12. But before that, first let me tell you something about of Next.js.

Introduction

Next.js is an open-source development framework built on top of React.js. It is React based framework which have various functionalities to power up both server-side rendering and generating client side static websites.

Next.js gives you the best developer experience with all the features it present for any production ready apps. Features such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching give developers a seamless development experience. Here are its newest features available in the latest version of its release:

So what are the game changing features available in the recent release.

Middleware

Middleware is not a new concept. Frameworks such as Express.js and Laravel use middleware to intercept http requests and process in someway before it goes to actual route handler.

This is one of the most exciting features in this release. Why this version is special and exciting?

You want your website to be fast and efficient. The best way to make it happened is to cache pre-built html pages on a CDN. But when you do that you lose ability to make your pages dynamic.

On the other side, you have server side rendering that uses a node server to fetch data from a database or an api when when the incoming request comes in. The problem in that is, it is slow and inefficient. In a perfect world users need speed and dynamic content at the same time.

Next.js has very clever approach, leading the way to achieve both at the same time. Vercel, the parent company of Next.js has a product called edge function feature. These are serverless functions like AWS lambda or Google Cloud function except they are deployed to the edge like CDN so your end users get extremely fast executions.

Common use cases for where we can use middleware are?

• User Authentication
• Bot protection
• Redirects and rewrites
• Handling unsupported browsers
• Service-side analytics
• Logging

Concurrent Mode

Concurrent Mode helps React apps stay responsive. It gracefully adjust to the user’s device capabilities and network speed. React 18 adds new features including, Suspense, automatic batching of updates, APIs like startTransition, and a new streaming API for server rendering with support for React.lazy.

If you are not familiar with suspense it is basically a component that allows you to wait asynchronous data before rending its children. In previous version of Next.js if we use this suspense component it would result an error as it is not compatible with previous versions. In Next.js 12 it supports this feature and we get ability to implement it by enabling SSR Streaming.

To enable concurrent mode, Ensure you have the rc npm tag of React installed first then use the experimental flag concurrentFeatures: true::

npm install next@latest react@rc react-dom@rc

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
}

Server Components

React Server Components render everything, including the components themselves, on the server. This is fundamentally different from server-side rendering where you’re pre-generating HTML on the server. With Server Components, there’s zero client-side JavaScript needed, making page rendering faster.

Server components allow you to natively render html from a react component on the server. It uses http streaming to progressively render a web page on the server. That means if you need data for one component and then another component and another, you don’t have to wait for one after the other. It will render the first one, the next one and so on.

With server components you can stream html from an edge function immediately and progressively show update as your data comes in. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.

How to Enable React Server Components

To use React Server Components, ensure you have React 18 installed. Then, turn on the concurrentFeatures and serverComponents options in next.config.js:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
}

Next, if you already have customized pages/_document component, you need to remove the getInitialProps static method and the getServerSideProps export if there’s any, otherwise it won’t work with server components. If no custom Document component is provided, Next.js will fallback to a default one like below.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

URL Imports

URL imports is now available in the newest version. Next.js team has been experimenting this services for a while to make sure it fully supports ES Modules in the previous version.

This feature is nice to have as we can now import open source packages directly from the CDN without any extra builds or installs. We will be able to import required packages from CDN rather than having to build them locally. Therefore, now we can use popular CDN source such as Skypack in your Next.js app.

The major benefit of using package over CDN is, they speeds up any website instantly using optimized JavaScript hosting services. The production-ready CDN is powered by Google Cloud, Cloudflare and AWS. It creates ready-for-production tools without the hassle of compiling and bundling them seamlessly. It scans NPM and builds executable ES module packages that you can import from your Browser.

To enable this feature? The URL has to be specified in the next.config.js file. You need to only enable domains that you trust.

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
}

Collaborative Live Coding

Working from home is increasingly common these days. Even before COVID-19, remote job was a popular trend. The shift means that you need more collaborative tools to work better as a team. With Next.js 12 this is taken to the next level. Now we are able to code, share, draw and edit instantly within your Browser using vercel platform. Your application will be hosted in Vercel.com and integrated through your chosen git vendor. After the deployment process, vercel provides you a live URL within seconds and kick off a pair programming session.

The most relevant features are:

• In-browser editing
• Invite any team member
• Only your favorite browser is required

// Vercel collaborative feature URL
https://vercel.com/live  

Wrap Up

In a nutshell, Next 12 is a complete game changer since it’s focused on development friendliness and performance in mind.

With Next.js 12, overall development workflows will be improved. It creates more possibilities for your web projects. By improving existing processes and functionalities, and adding new features to the framework, frontend developers now have more tools to create better user experiences in an efficient way.

As of now some of the awesome features are not stable, however we can still use those features in our application as we await a stable release of React 18.