HiveBrain v1.2.0
Get Started
← Back to all entries
gotchatypescriptreactCritical

What is the difference between Next.js and Create React App?

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
appandbetweenthedifferencenextreactwhatcreate

Problem

I'm trying to figure out the difference between Next.js and Create React App (CRA). I know both are there to make our life easier while developing our front-end applications using React.

After exploring some articles on Google, I found that the main difference is

Next.js provides server-side rendering (SSR) while Create React App
provides client-side rendering (CSR) and SSR improves the performance of
application loading.

But what about other parameters from a development perspective, like the following?

-
Maintainability and scalability of the web application developed with Next.js or CRA

-
TypeScript and React hooks/Redux support

Is it a wrong comparison?

Solution

I've used both NextJs and CRA. Both these frameworks can be used to get started quickly and provide a good developer experience. However, both of these have use cases where either of them shines better. I'll try to compare them based on some of these factors. Feel free to suggest edits with additional points or comments
Server Side Rendering

CRA
Next.js

CRA doesn't support SSR out of the box.
However, you can still configure it.
It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They suggest other tools for this use case.
NextJs has different types for SSR. It supports SSR out of the box.
* Static generation: fetch data at build time. This works best for use cases like blogs or static websites
* Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users.

Configurability

I think this is point where these tools are very different and your decision can depend on this factor

CRA
Next.js

Create React App doesn't leave you a lot of room to configure it.
Configurations like webpack config cannot be changed unless
you stray away from normal CRA way (eject, rescripts, rewired, craco).
Basically, you have to use what's configured in
react-scripts which is the core of CRA.
Almost everything is configurable.
If you check the example NextJs templates, you can see files like
babelrc, jest.config, eslintrc etc
that you can configure.

Maintainability

CRA
Next.js

CRA is very opinionated.
If you keep updated with the releases of CRA, it's not hard to maintain.
NextJs is also well maintained. They release regular updates.

Typescript

CRA
Next.js

Supports out of the box. You can initialize CRA app with typescript with
npx create-react-app my-app --template typescript
Supports typescript out of the box.
Start with configurations for typescript with touch tsconfig.json

Hooks support

Latest version of both CRA and NextJs installs a version of React that supports hooks. You can also upgrade to the latest version easily

Redux support

Redux is a library that you can use with both these tools.

Context

Stack Overflow Q#62967958, score: 224

Revisions (0)

No revisions yet.