In this article, I’m going to let you know the reasons why I migrated my website from react Js to next Js. Since next Js is nothing but a react Js framework so any react application can be migrated easily, just a few things are a bit different.
Next Js out of the box supports server-side rendering where react Js is a client-side rendering. In recent years client-side page applications have been in demand for many reasons. But a Web App like codebator where there will be multiple courses, tutorials, and pages, client-side rendering is a downfall because putting too much strain on the browser can worsen the experience of our users.
Initially while developing the application I was doing a server-side rendering for my react application using node js and express, but SEO(Search Engine Optimization) was one of the major things that was affecting my pages that means Search Engines such as Google and social popular websites like Facebook, twitter, etc were not able to read the meta tags, thus pages were not indexed.
Now to handle this, I used a library called react-helmet that let me append metatags to the head tag, and thus the pages were now indexed. I feel SSR react a bit hard and react has no de-facto way to implement it.
Thus it becomes a reason for me to switch to next js as it supports Pre-rendering i.e both SSG( static generation ) and SSR are supported on a page basis that improved my site performance.
While developing a website that will continue to scale in the future in terms of code, traffic its necessary to optimize the production build by splitting our codebase into smaller parts called chunks.
Initially, with react I bundled my build using a bundler like webpack and transformed using a compiler like babel. I used build time Gzip for generating bundle.js.gz by using Webpack's compression plugin. Gzip magically reduced the application size to more than 70%.
Having worked on this, found out that next Js supports automatic code splitting for faster page loads without installing any dependencies. Thus it became a reason to migrate my app to next Js.
Having said that you should have the understanding of how the code splitting and production build should be optimized irrespective of the language or framework you are using.
In react, we use react-router which helps us to navigate to the application pages. But in next Js, by default, anything that is inside pages folder in the root directory serves as a route or a page. For example, if you create a /about in the pages folder then in the URL that page could be accessed by www.codebator.com/about.
Hence on my website when you navigate to another page, it will probably, already have the bundle of the new page and thus render it immediately. This makes the navigation on the website super-fast.
Next Js has many built in functions that amazed me and saved a lot of time which I was putting while creating a react app. Sme of them are :
Next Js supports an intuitive, page-based routing framework (with dynamic route support)
Has Automatic code splitting for faster page loads. Moreover we can have client-side routing with optimized Prefetching.
Help integrated with built in CSS and Sass, and help for any CSS-in-JS library
Is fully extendable and provides API routes to build API endpoints with Serverless Functions.
Supports Pre-rendering i.e both SSG( static generation ) and SSR are supported on a page basis that improves website performance.
Many people prefer next Js app over create react app and vice versa. Some love SSR while some love CSR. It all depends on what kind of Project you are creating and what kind of requirements are there. In my case, I have created this website using both and preferred next Js over create react app. It would have saved a lot of time if I would have started developing in Next Js initially.