When I was working on my previous project — https://tweelog.app I used create-react-app (CRA) as it is the easiest way to start a React project. Only after putting this project in public and passing a month, did I figure out I should not have used CRA in the first place.

Before talking more about this topic, let me explain what is NextJS in simple terms from what I understood.

NextJS is a framework that serves React applications more efficiently than just building a React application and serving it statically

If you visit https://nextjs.org/ you see them explaining so many features but I will explain whatever I felt while building the project and post-deployment.

Why not just CRA?

For beginners, CRA is the best way to start a react project. Everything comes in with just one npm command. Once you start experiencing post live flow of a React app, you will figure out the caveats of CRA. Let’s see a few of them below.

SEO

As a solopreneur, I understand the importance of SEO. I believe in

SEO is the best marketing

If you are building a content-heavy frontend app, it is a no-brainer to make it SEO friendly. If you are aware of how search engine crawlers work, they don’t like Javascript so much. That is the reason your page should load the content the moment the page loads from the server as much as possible.

If you understand how React works, it is just a bunch of functions that depend on the window and document objects which are available on browsers. What NextJS does is, it lets you get all the data required on the server side and the moment the data receives on the client side, all the data is available already! I don’t go in deep and explain the implementation but here you can check it out — https://nextjs.org/docs/basic-features/data-fetching/overview

Not just that, NextJS has a very good cache setup in place along with <Image/> component which does not fetch all the images on load, instead fetch them when they are viewed. That is the reason the response times are super low.

Layouts

Like me, if you are building internal dashboards which don’t need any SEO, still NextJS justifies using it. While building https://showmyfin.com most of the UI was internal dashboards but from experience, I knew that there will be few static pages that I need SEO for.

The simplest way to do this is to separate the internal dashboard and the landing page and related pages and deploy them separately. This will double the work from the code repository till deployments. That is where I liked NextJS! Both static pages and internal dashboards can be a single app and can be deployed together.

In the very early stages of building an internal dashboard using NextJS, I identified that it is not a straightforward one. If you know NextJS, it uses file system-based routing. I had published a post already here — https://towardsdev.com/how-to-build-spa-with-nextjs-2ba6e6b6f564 I was almost building a library for it but then I figured out Layouts in NextJS.

With Layouts, you can easily create SPAs in NextJS. You don’t need to have separate projects as I mentioned above. Everything in a single project. Clean!

Deployment

This doesn’t have to be a feature of NextJS itself but I love Vercel. NextJS works seamlessly on Vercel. Even in the free tier, you get all features to try out the initial version of the app

Backend

If you are full on NodeJS then you don’t even need a separate project for your server. With API Routes of NextJS, you can build your APIs in the same project. I have personally not used it, but I am pretty sure it comes in handy when you want to quickly build the project.

From the documentation, what I understood is, that it is very similar to Express routing. You can even add middleware etc. It will be a mini Express application inside the NextJS project.

CRA vs. NextJS

The development of the actual business logic in both frameworks remains the same. The components you build, styling, React, etc are just the same. At a high level, these two differ in

How you deploy them
The performance in production

As explained above, the way you deploy the NextJS app is to run a node process, the way any backend server runs. The reason is, that NextJS runs a lot of Javascript on the server side for any page, renders it server-side, and throws out the HTML + JS + CSS from the first render to the browser.

Because of Cache, pre-fetching the data required for the page at the server side, image optimizations, etc., the performance, in general, is better than regular React applications.

Summary

With NextJS you can easily make frontend apps SEO friendly, optimized for production, and can even build Single Page Applications. With features like SSR, Image optimization, API Routes, and Vercel, I cannot go back to the regular CRA app.

On a side note, the NextJS team is very active in listening to the community and releasing the changes that the community wants. The Layouts is one such. So, you can trust that it will be actively updated. I have observed that even when they release a new change, they rarely break the existing code. Another reason to use NextJS.

That is it for the day. If you like this article, give me a follow on Twitter — (@pramodk73)[https://twitter.com/pramodk73] I tweet about SaaS, Software Design, and Software Architecture and I build SaaS in public. Cheers :)