Improving Performance Of Next.Js App And Testing It While Building A Badminton Based Web App

Abstract

We know that building a complete web application involves a lot of technologies and combining all of them in one place takes a lot of time and effort of developers. That’s where frameworks like Next.js come into play. Next.js bundles all of the packages and configuration files together in a neat and organized way. It is unique because it’s full-stack web application framework, where a developer can write all the frontend and backend code of an application in one place. So, it makes the developer life a bit easy and helps in shipping the product as fast as possible. But the only problem with full-stack frameworks like next.js is since we are writing the whole code in one place, every time we do a production build, the compilers of next.js has to compile the whole code base. That’s where we found some space for Improvement. In this article we will try to explain how we can improve the performance of production build next.js app by using some of the techniques and coding patterns which we learnt while building a badminton data analytics-based web app using next.js.

Keywords: next.js, client-side rendering, server-side rendering, data analytics, routing, dynamic routing, Image Optimization, page pre-rendering, lazy loading