Next.JS, a Development Framework for Scalability and Production

Nowadays, it is common to build websites using a framework such as React.js due to its simplicity and reusability. However, when it comes to scalability, additional configuration is required, and it is up to the development team to use best practices. Thus, to mitigate this issue, the Vercel team (previously known as Zeit) came up with a framework that provides the best developer experience for production and the proper configuration out of the box.

What is Next.js?

Next.js is an open-source framework to develop single-page applications with React.js, which gives you the flexibility to build applications that can be rendered in the client and the server.

Who uses Next.js?

These are some companies that have used Next.js:

• TikTok
• Twitch
• Hulu
• Realtor.com
• Ticketmaster
• Uber Market place

What are the advantages of Next.js?

Search Engine Optimization

One of the Single Page Applications (SPA) issues based on JavaScript is that the content is dynamically generated by manipulating the DOM instead of parsing HTML code. 

For instance, for Google’s crawler, known as Googlebot, there are at least two stages to get a website indexed. First comes the crawling step, where Googlebot navigates through a website and passes its content to the indexer. Next, the indexer tries to parse the content, store it, and if links are detected, they are passed back to the crawler. This process works well for HTML content. However, for Javascript content, there is an extra step known as the rendering stage. In this stage, the Javascript code is executed, the content is passed back to the indexer, and the process repeats itself. This separation between HTML and Javascript is required because rendering Javascript is expensive. Therefore, to get pages indexed as soon as possible, Google prioritizes content that is available without Javascript, and then it adds content that requires Javascript.

This messy process usually causes SPAs to take longer to get indexed, so to mitigate this issue, Next.js uses server-side rendering content. In this way, it generates the HTML content for the initial load in the server, and Next.js sends additional JavaScript code to the client so the website can continue operating as a SPA.

Server-side rendering, Static generation, and Client-side rendering

Next.js offers two types of pre-rendering: Server-side rendering and static generation. The first one generates the HTML on each request making the data always up to date. Whereas the latter creates the HTML at build time, making it possible to be cached by CDNs. Thus, an application should only use static generation in cases where data will not often be changing.

An additional way is Client-side rendering which means that the Client-side JavaScript fully renders the code. Nevertheless, this method is usually discouraged because of the issues stated above with SEO. Finally, it is essential to note that there is also a hybrid approach where you can use Server-side rendering for pages that change often and static generation for others that do not change.

Code splitting

Imagine that you have a website composed of hundreds of pages. Waiting for them all to load would take forever and would severely undermine the user experience. Hopefully, Next.js is smart enough to load the code for the initial website and prefetch any website linked to that page. This process ensures that transitions are smooth and that only the minimal code required is loaded.

Image Optimization

Suppose that there is an image with a file size of 3 MB on your website and that you want to access your website on devices with different screen sizes and viewports such as laptops, cellphones, and tablets. If you had used a standard “img” tag and used only CSS to resize it, the image would still be 3 MB in size. However, one of the features of Next.js is automatic image optimization. The Next.js component “next/image” allows to optimize, resize and serve images in formats like WebP. This optimization ensures that the file size would also decrease depending on the size of the viewport. 

Lazy Loading and Cumulative Layout Shift

One of the critical points of user experience is to provide fast and smooth navigation. Next.js gives us a hand by only loading images inside the viewport. Any other image is loaded as they are scrolled into the viewport, which is helpful to prevent Cumulative Layout Shift.

As explained by Philip Walton and Milica Mihajlija, “Cumulative Layout shift” is a metric that measures how many unexpected layout shifts are in a website. For instance, suppose that you are on a website where you want to vote for one person. When you are about to click the button to vote for “Person 2”, the layout suddenly changes, showing a message above the buttons and displacing them below, making you click on “Person 1” instead. That would be a considerable error, and that is the reason why an application should avoid unexpected Layout Shifts.

The most common reasons for Unexpected Layout Shifts are resources loaded asynchronously and DOM elements getting dynamically added above existing content in the viewport. Therefore, it is helpful to lazy load images outside the viewport because the content in the viewport can load faster, which would prevent any unexpected Layout Shift.

Typescript

Although TypeScript can always be added to a React.js project, Next.js supports it right from the beginning, which is helpful because it adds static types to JavaScript code and provides hints on possible errors.

Community support

Next.js is an open-source project, and according to its GitHub repository, it currently has more than 1500 contributors, more than 60000 stars, and has been used by more than 275000 users. As previously stated, multiple companies use Next.js, and its popularity continues to increase.

Fast Refresh

Gone are the old days when you had to reload a website manually. Next.js automatically refresh any modification without losing any component state. It works depending on the type of file that you are editing. If you modify a file that only exports React Components, it would render only the code for that file. However, if you change a file that does not export React components, it would refresh that file and any file importing it. It is beneficial for syntax errors because once you fix them, the error automatically disappears, the component state is preserved, and there is no need to reload the application.

What are the disadvantages of Next.js?

It is opinionated

A difference from the flexibility of React.js, Next.js requires a more strict structure to be followed. For instance, if you want to set up routing, you must create files inside the page directory. The names of the folders and files indicate the name of the routes, and if you want to have dynamic routes, you have to create names using parameters inside square brackets. Additionally, you have to use the Next.js router component for routes to work.

Additional configuration for browser-only plugins

Some plugins may not be compatible with server-side rendering, so there would need additional configurations to make it work. For example, suppose that you want to import a library that only works in browsers, then you would have to use the Next.js component “next/Dynamic” to import the library only on the client.

No built-in State Manager

Just as React.js, Next.js does not have any built-in State Manager, so you would need to add libraries such as Redux.js or MobX manually.

In a nutshell, the advantages of Next.js clearly outweigh its disadvantages.

The only genuine inconvenience might be that Next.js is opinionated. Still, as shown in its multiple examples with different libraries, it can be integrated with most technologies such as Redux.js, GraphQL, among others. Next.js makes it easy to scale multiple pages because it can individually select how to render each page either on the client, the server, or hybrid. Furthermore, individual rendering coupled with image optimization and lazy loading makes a good combination of excellent SEO practices, improving the overall user experience.

If you are interested in learning more about this technology and how it can help you on your project, you can schedule a consultation with an expert.