DX, SEO, e-commerce – that’s why Next.js is so popular
The React framework Next.js has now finally reached the mainstream. We took a closer look at it and found that there are good reasons for its increasing popularity.
2021 has been a successful year for Next.js. A small ecosystem has now developed around the lightweight React framework and Vercel, the startup behind the open source project, has secured funding in the form of Series B funding of $ 40 million. High time to take a closer look at the framework. We list reasons why Next.js could also be in good hands in your tech stack.
Next.js was released in version 1.0 in October 2016. The framework for React should combine the advantages of Facebook’s popular view library with solutions for their disadvantages.
Until about the mid-noughties, the web consisted largely of static HTML pages – around this time, developers were increasingly starting to use PHP to make their web projects more robust and dynamic. PHP made it possible to process large amounts of data on the server side.
With the increasing popularity of JavaScript as the language of the web, and the advent of frameworks like Angular or React, the HTML rendering process shifted from the server to the client. So-called single-page apps – or SPA – rendered on the client side became the norm. With client-side rendering, only an (almost) empty HTML document is loaded with the initial request. Further content is provided via the internal application logic and interfaces. This reduces the server-client communication and the load on the web server. This no longer has to render the pages – as in PHP – but only transfers structured data to the client, which does the rendering.
With all the advantages that this development brought with it, there are of course also disadvantages. If you want to develop a complete web application from scratch with React, you have to consider a number of important things:
The code needs to be bundled and transformed. This requires a bundler like Webpack and a compiler like Babel. The app must be optimized for productive use with properties such as code splitting. For performance reasons – and for SEO reasons – it may be useful to pre-render some pages. If you want to link the app to a database, you also have to write server-side code.
Next.js should simplify the points mentioned – while at the same time maintaining the advantages of Reacts.
Search engine crawlers usually work their way along the object structure of an HTML document and index the respective content. If you come across a link element, the linked page will also be scanned by you. In a SPA, the initially empty HTML document is dynamically filled with content – after the start page has landed in the search engine index without content.
There isn’t much for crawlers to see in a traditional SPA. (Graphic: Grenar / Shutterstock)
Next.js solves this problem by delivering pages to the client with the entire content rather than empty. This allows the crawlers to read and index the content.
This process is also called pre-rendering. This means that Next.js provides the HTML for each page in advance instead of rendering it client-side with JS. Each HTML element is associated with minimal JavaScript – just enough to render the page. Only when the HTML is loaded is the associated JS executed and the page interactive. This process is also called hydrogenation.
The framework offers the possibility of generating pages statically as well as server-side rendering. Developers can decide for each page which approach makes more sense. Apps that combine both approaches are also called hybrid apps. The difference between the two is essentially the point in time at which the HTML required for a page is generated. With the recommended static site generation, the HTML is generated at build time and reused for every request. With server-side rendering, the HTML is regenerated with each request. Next.js also allows individual pages of such a hybrid app to be rendered on the client side as required.
Pages are simply React components in Next.js and can be exported via .js, .jsx, .ts or .tsx files in the Pages folder. Each page has a route based on its file name. With the link component, Next.js has a way to switch between the individual pages via JavaScript. This is significantly faster compared to the default navigation via browser.
To the one below pages/about.js can via /about can be accessed.
function About() {
return
About
}
export default About
Dynamic routing is also supported. And the routing in Next.js also has SEO advantages. It creates static and dynamic page trees so that sub-pages can also be included in the search index.
A good developer experience is a key factor in the success of a framework or tool. Next.js offers a whole range of features that make working with the framework easier for developers:
Next.js automatically regulates the issue of code splitting for you. Each page of your Next.js app is loaded separately. This means that if, for example, the home view is loaded, the code of other pages is not initially also delivered. In this way, the home view can be made available quickly, even if your app is very large and has many sub-pages. This mechanism also means that the pages function in isolation from one another – and a failure in one component does not disable the entire application.
In Next.js it is possible to import CSS files from a JS file. To add a style sheet, a CSS file can be used within a file pages/_app.js can be imported as follows:
[/code]import ‘../styles.css’
// This default export is required in a new `pages / _app.js` file.
export default function MyApp ({Component, pageProps}) {
return
} [/code]
These styles are global, which means that they affect all pages and components of a Next.js app. To avoid conflict, it is best to only do so within pages/_app.js Imported.
In development mode, you also benefit from hot reloading when editing your CSS – that is, the edited files are brought in at runtime and the changes are thus almost immediately visible in the browser – with the application state remaining the same. In production, all CSS files are then merged into a minified .css file. Because Next.js is a React framework, every CSS-in-JS library is of course also supported.
Next.js offers a development environment with Fast Refresh – this means that every change you make to React components is visible in the browser almost immediately, without you having to perform a manual refresh. The state of this component is retained. Next.js only updates the code within this file, everything else is not re-rendered. If the edited file has exports that are not React components, Fast Refresh renders both this file and those that are importing it. For example, if Button.js and Modal.js both import theme.js, editing theme.js will export both.
In addition, Next.js has a way of building an API with serverless functions with so-called API routes. Files within the pages / api folder refer to / api / * are treated as API endpoints instead of Pages.
Similar to React, there is a tool for Next.js that takes over the installation and configuration. Above npx create-next-app developers can easily bootstrap a basic Next.js app inside.
The documentation is also impressive. In a detailed tutorial, developers learn within a few hours to find their way around the framework – provided they have React knowledge.
Since version 10, Next.js has been offering its commerce kit, an all-in-one starter kit for creating high-performance e-commerce pages. Vercel, the startup behind the framework, developed the kit in collaboration with Bigcommerce. Developers can use it in just a few simple steps click together an online shop – To do this, you simply have to clone the repo, deploy it and then adapt it as you wish.
Next.js integrates seamlessly with so-called headless content management systems such as Strapi or Contentful.
Next.js offers significant advantages in terms of SEO, performance, scalability, security and developer experience. If you want to use Next.js in connection with a headless CMS, you should keep in mind that this could potentially increase the workload for the developer team. In comparison, platforms like WordPress are considered more accessible for users: inside without a dev background.
