What is Next.js?
It seems to be on every front-end developer’s lips these days, but what exactly is Next.js?
Standard use cases for React are modern stack websites and single-page applications (SPAs). The former spans multiple pages, like a traditional website, but is implemented with a modern framework—while the latter provides an app-like user experience by updating the current page, rather than loading new pages from a server.
React is originally a client-side technology running in the web browser, where it is meant to create single-page applications or to make parts of regular web pages dynamic. In other words: React only supports rendering in the client. Because React works in the browser, developers of any traditional server-side framework—like Java, .NET, or PHP—can all use it.
However, there are two important challenges with this approach:
- Developers increasingly implement design systems and UI components with frameworks like React, meaning that they want to implement their entire website using the same technology for faster development and consistency.
- Browser-based rendering is slow, compared to server-side processed and rendered HTML. The processing power of a mobile device may be limited, and client-side rendering typically needs to perform additional round trips to the server, in order to fetch data.
Next.js to the rescue
Next.js can also perform static generation, as opposed to dynamic generation. This involves pre-generation of the site, where a set of files are copied to content delivery networks, and made available around the world, and in the process making the site lightning fast.
Static generation makes your site appear just like a good old web page, with “just some files” on display. In the past you had to build these files yourself, whereas now Next.js generates it for you.
However, dynamic generation is the more common method, which means generating HTML on the first request with caching for subsequent requests. The reason for this is that to generate a whole site statically can be very time consuming, and has typically been a problem for previewing and making changes rapidly—for instance with scheduled publishing.
This third Next.js trick adds the best of both worlds. Static incremental means that you can generate what you want statically (like a cache warmup), but still dynamically update elements you haven’t generated statically or that have changed—thus in practice working like an advanced cache.
If you want to start building websites with Next.js, you need to consider the following:
- If your site is small and you don’t need editors to perform changes, you can just hardcode it
- If you need to change content without involving technicians, you will need a headless CMS
- Whether or not you should also choose a composable CMS
And if you for instance are building a cinema app—with services for ordering tickets, choosing seats, information about movies and actors, etc.—this probably involves a larger set of content. And this prompts the need for a headless CMS to handle the content as well.
You must also consider what APIs you need to deliver your specific project, as Next.js only is a front-end!
In any case, Next.js is set to making waves in the front-end community in the coming years, and we’re excited to take part in the adventure!
Now that you know the basics of Next.js, let's find out how you can use it together with a headless CMS to build your next site!
Continue reading: How to build a fast and modern site with Next.js and headless CMS »
First published 6 May 2022, updated 3 November 2022.