Next.js

The world of frontend development moves forward so rapidly that some find it hard to keep up with all the new technologies and features that are frequently released on many fronts. Not so long ago, most of our frontends were built with another React-based frontend framework, Gatsbyopens-in-a-new-tab, but things do evolve fast, and a lot has happened in the near past. Especially due to the advantages brought by its recent versions, more and more of our projects at Wunder use Next.js.

Next.jsopens-in-a-new-tab is a React-based, open-source web application framework. It is built and continuously developed by Vercel in collaboration with Google, Facebook, and the global open-source community. It has gained popularity tremendously quickly in the past few years, and now companies like TikTok, Ticketmaster, Docker, Netflix, GitHub, Uber, Starbucks, twitch, and many more use it to create interactive, fast, secure and search engine optimized web applications.

What’s all the fuss about Next.js?

What is really special about Next.js is that it allows creating search engine optimized React apps with zero configuration. This is because it greatly simplifies achieving “server-side renderingopens-in-a-new-tab” (SSR), where the content is rendered by the server before the user visits the website. This solves the issue with traditional React apps, where the content is rendered client-side, meaning the first page a user or, e.g., a search engine’s indexing robot faces is a (basically) empty HTML page lacking any rendered content. From there, the browser fetches the javascript file containing React code to render content to the page and make it interactive. That also increases the time for the first contentful paintopens-in-a-new-tab.

As the web application is fully rendered beforehand with Next.js, the first thing a user or search bot sees is a fully rendered HTML document. After that, the rendering moves to the client-side, making the web application work like a traditional, fully interactive React application. In practice, this means quicker web services, enhanced user experience, and better possibilities in search engine visibility. Google’s crawlers, for example, value fast sites where the first contentful paint happens right away.

A new set of functionalities introduced in 2020 have contributed to Next.js’ wide adoption and popularity when creating CMS-backed decoupled applications. In particular, the new technique called Incremental Static Regeneration (ISR).

When used in combination with a CMS, ISR allows you to get the benefits of a static site together with automatic regeneration of the built pages, eliminating the problem of long-running and non-atomic static site builds.

You can learn more about this technique on Next.js’ docsopens-in-a-new-tab.

Why and how we use Next.js

At Wunder, we have adopted Next.js in combination with Drupal for all the cases where we want to take advantage of a decoupled architecture: giving the final users the best and fastest possible experience, and the content editors and administrators full control over the content of the web application.

Next.js is very flexible and backend agnostic: frontend and backend can be connected in various ways, including GraphQL, JSON:API, REST or other methods. This allows us to integrate other data sources in addition to Drupal, making the architecture as complex or as simple as needed.

Next.js has gained popularity during the past few years, and now about one in every ten sites in the top 10 000 most popular websites is using Next.jsopens-in-a-new-tab, and over one in every five React websites in the top 10 000 websites is using itopens-in-a-new-tab. (02/2022)

Next.js’ growing popularity continues to bring new benefits for the developer community. Because it is an open-source framework developed by its users, the more users it has, the better its support becomes and the easier it gets to find examples and compatible libraries.

It is clearly taking its place as the standard framework for doing SSR in React for many reasons, for example for its:

• Easy-to-learn, simple, yet powerful API
• Easy integration to virtually any backend system
• Innovativeness, as experimental features are quickly introduced in Next.js
• Easy upgrades where the new releases don’t break backwards compatibility
• Focus on performance and Developer Experience