Choosing the right web development framework is very important in order to achieve your ultimate goal of driving high traffic and revenue to your website.

That is why, after days of battling with my inner thoughts and pushing myself to code, I finally decided that it's time to switch this blogging website from React to NextJS.

In this blog, I will list the reasons why you should use NextJS instead of React for your blogging website.

## 1. NextJS provides better SEO performance than React.

For a blog website to gain high traffic, it must be configured properly for Search Engine Optimization (SEO).

NextJS is the perfect tool for this job because of the feature it offers, which is Server Side Rendering (SSR).

SSR is the type of rendering where the web pages are generated on the server. It allows search engine crawlers and bots to scan and index web pages faster.

This means that a website built on NextJS has a higher chance of ranking high in Google than a website built on React.

## 2. NextJS has faster loading times compared to React.

When a user visits a website built on NextJS, it will display a fully rendered HTML page instantly.

On the other hand, for ReactJS, it will take some time before the webpage is rendered, which negatively affects the User Experience (UX).

Check out the images below for the performance test of `solodevhub.com`, this website, from Google Lighthouse.

### Using ReactJS (Before)

![reactjs lighthouse performance](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/nextvsreact/solodevhub_lighthouse_performance_poor.webp)  

### Using NextJS (After)

![nextjs lighthouse performance](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/nextvsreact/solodevhub_nextjs_lighthouse.webp)  

As you can see, there is a significant improvement in the performance of this website, with the score increasing from 57 to 95 after transitioning to NextJS.

One of the reasons behind this enhancement is that NextJS excels in rendering the First Contentful Paint (FCP) at a faster rate than React, which tends to take longer in this aspect.

This is very important, especially for those who are new to your site. When a user encounters a blank page and experiences longer loading times, they are likely to leave immediately.

This will result in lower traffic on your blogging website.

## 3. Increase Image Optimization using NextJS compared to React.

NextJS has a built-in image component `<Image />`, which you can use in your application to enhance the loading time and performance of images.

I think this is really cool because you don't have to find and install libraries in your app, as it's already provided by NextJS.

I have used and tested this image component from NextJS, and it really loads faster compared to the HTML `<img>` element that we usually use.

These are the features of using `<Image />` from NextJS:

- **Size Optimization:** Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.

- **Visual Stability**: Prevent layout shift automatically when images are loading.

- **Faster Page Loads**: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

- **Asset Flexibility**: On-demand image resizing, even for images stored on remote servers

## 4. You can use `styled-components` with NextJS, just like React.

Before making the final switch to NextJS, I ensured that I could continue utilizing my preferred styling library, which is styled-components.

The advantage of using styled-components is that it allows me to effortlessly manage the styling of components within my application.

Thankfully, NextJS offers support for various styling libraries, including styled-components thus eliminating any concerns I had in this regard.

## Should I learn NextJS instead of ReactJS?

Learning ReactJS was never a mistake because in order to build applications using NextJS, you must know how to use React first.

Since I've built applications using ReactJS before, it took me about a week to learn, convert, and deploy this website into NextJS completely.

If you want to learn NextJS easily, I recommend learning with [The Net Ninja on YouTube](https://www.youtube.com/watch?v=A63UxsQsEbU&list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw).

## Conclusion

React was a bad choice for building a blogging website as it is not optimized for SEO, unlike NextJS.

So before you build your website, think of the main features of the framework you're going to build with to save yourself the trouble of converting your website from one framework to another.

That's it! I hope I have convinced you enough to use NextJS instead of React for your upcoming blogging website. 😉