We migrated WeTal from Create React app to Next Js app. Here are some lessons learned with pros and cons. The reason we rebuilt our platform I Next was because of SEO. We found it difficult to index pages in Google with React, and with Next solving our problems, we chose to spend 2-3 weeks rebuilding the site.

Next is not completely different from React. It is very similar in structure and built on top of React. However, it can be good to know the main difference.

Server-side rendering and performance

One of the key differences between ReactJS and Next.js is that Next.js provides built-in server-side rendering (SSR) capabilities, while ReactJS does not. If you inspect the source code on our Next page, you will now see the code. Whereas with React you only see a JavaScript code but cannot see texts or images. This is optimal for performance and SEO as Next creates real pages. Next.js makes it easy to implement SSR, while with ReactJS you have to set it up manually. This has been great for our performance.

SEO

An obvious advantage of Next is SEO. When every page is server-side and renders HTML, SEO is better easier to work with. For us, SEO is very important to reach our candidates. An example of something that works today is that when we post a page with a Next JS platform, e.g. on Facebook, Facebook simply reads the page's first image, title, and description,

We could not get React to read each page's unique image or text - it always printed WeTal's default image and default slogan. Next JS solved this where each page got its unique image, with text using HTML. There might be some way to solve this in React, but it wasn't obvious to us, while Next solves this out of the box.

Routing

Another major difference between the two frameworks is their approach to routing. ReactJS does not come with a built-in routing system, so developers must use third-party libraries such as React Router to handle client-side routing. In contrast, Next.js has a built-in routing system that simplifies client-side routing and is capable of more dynamic routing options.

Hosting

We used Vercel as hosting for our Next JS frontend, which is an extremely flexible tool. With a few clicks, our frontend was launched with a test URL that quickly connected to our domain wetal.com. With React we used AWS and it was many more steps to host a frontend on S3.

Filesystem-based routing

Next.js also provides a unique feature such as file system-based routing, which allows developers to organize their code and pages in an easy and intuitive way. Each file becomes a route - i.e. a URL with the same name. If your page is /my-profile/john then the file structure in your code is also this way and Next creates this page automatically which makes it easy to start and navigate. With ReactJS, developers have to configure their routing and file structure manually.

Built-in features

Next.js comes with several built-in features not available in ReactJS, including automatic code sharing, optimized images, and serverless features. These features can help improve application performance and scalability and reduce the amount of manual configuration required by the developer.

The bottom line is that we have fallen in love with Next JS and its benefits and will continue to build all our platforms in Next. Moving to Next from React is easy. We'll update this blog post if we notice obvious drawbacks, but so far we're very happy with the benefits.