Why I Migrated Create React App to Next.js

website image

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.

SSR (Server Side Rendering)

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.

You can find out The Benefits of Server Side Rendering Over Client Side Rendering in the article published by Walmart Labs. Moreover According to Google in its docs states that it's difficult to process JavaScript and not all search engine crawlers can process it immediately.

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.

Code Splitting and Optimization

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.

Routing and Prefetching

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.

By default, each page is pre-rendered through Next.js. That means Next.js generates HTML in advance for each page, instead of making it all done by JavaScript on the client-side. Pre-rendering on my website led to better performance and better SEO.

So you might be guessing why my this website is quite fast with no page loads. So the answer is next Js comes with a good performance Optimization where it will do the page splitting of each page. If the page is linked to another page then next js will prefetch the JavaScript bundle as a low priority.

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.

Some of the pages on the websites were large approx more than 125kb which is the standard hence used one of the advanced features of next Js that is dynamic imports which import JavaScript module dynamically and thus split the code further into manageable chunks that improve the performance and SEO.

Other Reasons

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.

Conclusion

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.