Naimat Ullah

Mar 11, 2022

Next.js; what is it and why do we use it?

So first up, what is Next.js? 

Quite simply, is a React framework for developing single page Javascript applications. The benefits of this framework are numerous, both for our clients’ applications as well as for our development team. The more we, as users, interact digitally, the more impatient we become as our expectations are not met by websites and apps that fail to load within milliseconds. Technology decisions play a large part in being able to deliver highly performant, scalable, successful applications and as such, we have started using Next.js for a number of reasons; for the most part related to speed and performance. So what are the benefits specifically?

Server Side Rendering (SSR)

React components that make up the user-facing part of a website are all initially rendered on the server side. This means that once the HTML has been delivered to the client (the user’s browser), nothing else needs to happen for the user to be able to read the content on the page. This makes page loading times appear much faster to the user.

SSR also gives the benefit of an out-of-the-box, indexable and crawlable website, which is essential for Search Engine Optimisation (SEO) as the client side javascript does not need to be executed to see the page content. Essentially, our clients benefit from improved technical SEO. 

​Rendering the same components on the server side as on the client side (universal rendering) means that development time is reduced as we can build our React components once and Next JS takes care of everything to do with re-rendering those components in the user’s browser. Developers can just concentrate on building components and not have to worry (too much!) about which environment a component is being rendered in.

Automatic code splitting

Next.js is clever enough to only load the Javascript and CSS that are needed for any given page. This makes for much faster page loading times, as a user’s browser doesn't have to download Javascript and CSS that it doesn't need for the specific page the user is viewing. This increases performance as there is less for the user’s browser to download and the user benefits from seeing the page content quicker.

Hot Module Replacement

This is less important for the end users of an application but very important for developers. HMR allows developers to see any changes they have made during development, live in the application as soon as they have been made. However, unlike traditional "live reload" methods, it only reloads the modules that have actually changed, preserving the state the application was in and significantly reducing the amount of time required to see changes in action. Ultimately, the positive impact for our clients is that it takes us less time to develop because there are development efficiencies to be gained.

In summary, the primary benefits of Next.js are:

If you want to find out more, or are looking to outsource development of a tailored application, call us on 01923 261166.

 Next.js; what is it and why do we use it?