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:
What are the advantages of Next.js?
Search Engine Optimization
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.
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.
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.
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.
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.