Create React App (CRA) is the standard way that is introduced by React. I started learning React using CRA.
Next.js is a framework that is made for React, it has all of the features in React and some new feature that is introduced. Earlier, Next.js is known for Server Side Rendering framework. But, on Next.js 10, they released a feature that supports Static Site Generation. Next.js can also use client-side rendering like CRA.
CRA is a static website that doesn't need a node server, we usually fetch the data using fetch API or axios.
CRA is the first choice when we first started learning React because CRA is simpler and easier to learn, definitely will get you to understand React patterns.
By using Static Site Generation (SSG), our website will be significantly faster because it only ships the user the HTML, CSS, and JS files. Different from CRA that gives blank HTML and fetches the data once it loads.
Other than that, in development performance, using Next.js will be so much faster because we didn't need to set up router, all of it already built-in and we only need to implement that by following the folder structure.
Next.js also has a built-in api in the same app, having these can simulate an express app in Node.js. This really helps because we can directly access the database or call an API directly from a single application.
SEO or Search Engine Optimization is a process on how to optimize a website so it can be easily searched on a search platform like Google.
As we can see, Next.js give so much more data in the page source, because all of the content on the website is shipped initially. Different from Create React App where it only gives blank div:
CRA can only do one type of rendering which is Client Side Rendering, we lost some flexibility from Next.js when using CRA.
By using CRA, we need to setup React Router manually every single time. This is kind of annoying, but you can create a template so you don't need to make it each one.
CRA only sends out blank div so it will be harder for the website crawler to get the data.
Next.js work in its own way, so there are some conventions like folder structure, api route, and others that we need to follow.
Next.js is a new framework and does not have so many users, so it will be hard sometimes to find resources to learn Next.js deeply.
Personally, for projects that use authentication, and all of the content lurks behind the authentication gate, I will use Create React App because we don't need the SEO. Usually, a complex website also has a backend application so we don't need to call an API or database.
But, for projects other than that, I will always use Next.js. Next.js was my greatest find and I enjoy my time developing a website with it.
Enjoying my post? Kindly subscribe to my newsletter if you want an update everytime I post.