According to the 2022 Stack Overflow survey, React has finally surpassed jQuery as the most used web framework. So while React undoubtedly still has a bright future ahead of it, a few questions remain unanswered with regards to how to best use React. One of the most popular debates is whether you should use Next.js vs Create React App, so here are my thoughts on the argument.

Why do we need Next.js and Create React App?

Next.js and Create React App serve largely the same purpose. At their core they're pre-configured, easy-to-use frameworks to get started with React. Of course Next.js has since exceeded this functionality and now offers much, much more but today we'll be just looking at them as "ways to get started" with React.

As far as I understand it, pre-2016 React development required in-depth knowledge of bundlers and Webpack to even get started. Create React App was a huge shift in accessibility to React since it allowed virtually anyone with terminal access to start up a React app with a single command.

Create React App's strength, and what would also become it's biggest annoyance, was the lack of configuration. Users weren't asked to mess with complex bundling tools they didn't understand and could just get started.

The strengths and weaknesses of Create React App

There's a lot to say about Create React App, but you shouldn't just take my word for it. In this part of the article I'll be referencing a recent comment made by Dan Abramov (co-creator of CRA).

You can read this post in full at the facebook/create-react-app github repository: We need CRA maintainers. It's a very interesting read into the current state of React and Create React App. I'll break it down (and what it means) here.

Configuration, or the lack thereof

[Create React App] was intentionally minimal and limited in scope (no configuration, no plugin system) for two reasons. One reason was that, the more feature-rich it is, the harder upgrades will be. The other reason was, I knew that React itself will take a vast majority of our time, and I won't be able to dedicate more than a few weeks sporadically to CRA every now and then.

Create React App is simple, and that's the way it was designed. It was more out of necessity than anything else, but with the evolution of the React ecosystem this has slowly become somewhat of a problem. For example, up until the recent Create React App 5.0 release, there was no official way of installing TailwindCSS. This meant that on top of installing Create React App, many developers had to resort to installing tools like Craco, which allow users to add extra configurations for both Webpack and Babel.

Caching and building

Unlike Next.js, Create React App has no built-in caching. Next.js keeps a local cache on the filesystem each time the app is started in development or built, which is extremely useful in cases where Continuous Integration is used since an automated pipeline is able to check if any files have been changed and decide to skip building them again altogether.

For small projects this won't make much of a difference. However, the larger your project becomes the more you'll be looking to shave off precious minutes from your build times.

As Dan Abramov observes:

[Create React App] is a tool to get started and get something running fast. Perhaps, it's not even best at that anymore.

The issues with CRA become apparent as a project grows in size.

Create React App is in "maintenance mode"

We would get critical fixes out as soon as possible, but overall, starting with 2.0, [Create React App is] mostly in maintenance mode and does not strive to be the best tool for production React apps.

While a tool being in maintenance mode isn't usually a major red-flag, in the case of the Javascript ecosystem this can become a problem very quickly. Javascript moves fast, and with so many competitor tools constantly improving their speed and feature support being in maintenance only is obviously an issue.

CRA likely will never have support for Server Components, and it's unlikely the speed at which projects are built will improve.

Create React App's nested routes are still very powerful

The one argument in favor of CRA I see over and over is about it's nested route structure. If you're unfamiliar with nested routes, this is the practice of creating routes within routes. This is a very useful pattern in React as it can make heavy use of React Context and hooks.

For example, the page /user/settings could be a nested route of /user, and still have access to the user page's data via a context provider. Nested routes are also incredibly useful for protecting certain routes. Simply make the highest route inaccessible and all its children will also be.

In general I find it keeps code cleaner. It also makes app logic much easier to comprehend.

Unfortunatelythe downside to thisis that nested routes are easily replicable in Next.js, and many other React starters also offer the same functionality.

Create React App's pros and cons

Here's a roundup of what's written above and some other thoughts:

The strengths and weaknesses of Next.js

Next.js is the king of React websites: it's versatile, easy to configure and built from the ground up to statically export pages. This leads people to believe it's not well versed for building one page applications. (Spoiler: this couldn't be further from the truth!)

Easy to get started

One of the best things about Next.js is just how quick it is to get started. Unlike Create React App, Next is an all-in-one package.

• Routing is built in (although rudimentary)
• A component that wraps your app is easily accessible
• It doesn't require a separate package to inject tags into <head>
• It comes with the <Image> component, which honestly deservers an entire article by itself

Setting up nested routing requires some Next.js know-how

While Next.js is not intended to be used with nested routes, it's definitely possible to implement it... Although this does require understanding how Next.js' routing functions, which can be quite annoying.

One of my favorite examples of this is Max Lynch's (Ionic's CEO) take on using Next.js as an app native front-end solution. The ingenious solution, which you can check out at mlynch/nextjs-tailwind-ionic-capacitor-starter on Github, relies on creating catch-all routes, and then redirecting them to a component that handles routing client-side.

This makes Next.js compatible with any of your favorite React routers: react-router, ionic-router, wouter and many more.

Actively developed, maintained and funded

It's difficult to argue for Next.js without also mentioning that it's at the centre of Vercel's business. And the $150M funding they've received to develop Next.js further is even harder to ignore.

Quite a stark difference compared to Create React App, which is just in maintenance mode, without new features planned for it.

Next.js' pros and cons

Here's a roundup of what we've mentioned (and some extras so far)

Final thoughts

For me, there's no doubt Next.js is probably the wisest choice if you're just starting out with React. Sure, it might take some extended reading to understand everything Next.js has to offer, but most of it is entirely optional.

In fact, you can use Next.js as a beginner just as well as you can use Create React App. Its strengths lie in the possibility of being able to do so much more with it.

The discourse isn't obviously just about Next.js vs Create React App, however. This year we've also seen Vite.js React and Remix jump into the fray. These two are great topics in and of themselves and probably deserve their own articles.

All in all, the great thing is that whatever choice you make, you'll almost never be entirely locked in. Jumping between CRA and Next and Vite has never been easier so you can (and should) shop around before deciding.