score:154
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.
score:-1
react is a javascript library while next js is a framework that builds up on react and greatly enhances react apps and makes building large scale react apps easier, the main advantages of next js are the build-in Server-side rendering (SSR) wich automatically pre-renders your page on the server and makes your app run much faster SSR also helps with SEO optimization the next key feature is also its build-in File-based Routing whereas in react you'd have to install the React Router package and manually add the routes, next js also can be used as a backend where you can blend your backend and react code in the same project without having to create an API ,since it can do SSR it can also perform server-side code like store data, get data, authentication etc. personally i think next js is a very powerful tool that every react developer should master.
score:5
React is just a JavaScript library, and on the other hand, Nextjs is a React framework. SSR is one of the benefits of Nextjs, But there are many other benefits. Nextjs can do everything react does, and on top of that, it has features that react alone doesn't have. Checkout the documentation for nextjs here: https://nextjs.org/docs/getting-started
score:9
TLDR
biggest difference is purpose of both projects. NextJS : JAM Stack or Static Site Generator Create React App : is an officially supported way to create single-page React applications.
Explanation:
This conundrum is true for many opensource projects. Seem alternative of other but they have key differences. For Example in this case Although both projects use ReactJS as front end and produce webapps. the problem they solve are very distinct. there are some overlapping features themes/templates in js. but development and future work will be to enhance project such that it helps solve there problem statement in better way.
i.e. NextJS will try to include if there are any new Markdown features developed. which won't be the case in CreateReactApps.
Suggestion.
from your question it seems you are looking these projects for developing React Native Apps. So I will suggest go with Create React App.
your comparison should primarily be whether this project align with Problem I am solving. then compare. Maintainability, Scalability, Typescript and React Hooks/Redux support.
In case needed more info do comment.
score:50
Create React App is just a React project creation engine to help you setup your React project quickly. After running the CRA script npx create-react-app <appname>
you will get a nice and clean single-page application that you can run. Under the hood you also get things like babel, eslint, jest, webpack already setup so it's a really convenient way to start doing React development. And in case you'd need more control over the configuration of those tools, you can still use npm run eject
.
Next.js on the other hand is a framework based on React to build Node.js server-side apps. This means you will use the same component-oriented logic to build pages and leverage the Next.js routing engine for page to page navigation. Server-side rendering will allow loading time to be more spread over time, so perceived performance will be probably better. Redux can be used as well but there will be some additional steps to make it work properly (see https://github.com/kirill-konshin/next-redux-wrapper)
Whatever you choose, in the end, it will be React coding. Components, JSX, TypeScript support, React hooks, and all other core aspects of React will be supported either way. Therefore, you can expect similar degree of maintainability. On the other hand, scalability depends on your choice: if you choose Next.js you will host the app on a server infrastructure which should be sized according to your audience whereas React bundle created with CRA just need to be statically hosted somewhere.
Source: stackoverflow.com
Related Query
- What is the difference between NextJs and Create React App
- What is the difference between React Native and React?
- What is the difference between hashHistory and browserHistory in react router?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- What is the main difference between React Query and Redux?
- React - What is the difference between renderToString and renderToStaticMarkup
- React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
- What is the difference between React component instance property and state property?
- What is the difference between React component and React component instance?
- How does React router works and what is the difference between <link> and<Route>
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What is the difference between useHistory() and props.history in React Route
- what is the difference between getDefaultProps and getInitialState react js
- React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- What is the real difference between value and defaultValue in React JS?
- What is the difference between a javascript package, node package, and react package?
- What is the difference between React and Preact diff algorithm in depth
- What is the difference between a fibre object in React 16 and a React Element?
- What is the difference between Routing in React and Express
- What is the difference between passing a function name in onclick react and calling it through callback
- What is the difference between key and id in React component?
- what is the difference between React setState and Hooks setState?
- What's the difference between functional component and create component using useMemo() in React
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- What is the difference between function and functional React component?
- What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?
- What is the difference between App: React.FunctionComponent and App = (): React.FunctionComponent?
- In React, what is the difference between using functional component and just a function, which returns React node?
More Query from same tag
- Jest error Unexpected token ... (ES6)
- How to access the below json value
- Material UI – Global checkbox focus styling (not locally)
- MIME type ('text/html') is not a supported stylesheet MIME type with react-django heroku deploy
- Best way to slice a string that is stored in an object
- Using OOP in react js
- How to fix : Cannot find module 'webpack/bin/config-yargs'
- How to map through the JSON array of objects in React?
- ReactJS Add in Component based on a number user inputs
- overriding onDrop event breaking ImageInput preview
- How to access ref from a non-related component?
- React setState callback not called for external (npm packaged) component
- Fix a react state variable even upon refresh
- Material-ui V3 is not loading first tab for after fetch data (or page load)
- TypeError: Cannot read property 'active' of undefined with react-images
- Material UI make 2 elements the same height
- Why Reactjs is displaying all the Users Fullname at a time
- How to return alphabetically my map function with React?
- React: how to execute two functions at the same time when one is dependent on the other
- Dealing with hyphens in css-style when writing them as style objects in ReactJS
- React Array Map Issue with ES2015
- How to fix Cannot read property 'preventDefault' in React?
- How can I provide a useState to a context in jest?
- Reactjs img tag not rendering the string in src:?
- My else part of add to cart functionality is also putting the new quantity in the cartItems array rather than just increasing quantity of Items
- CSS, imposing lines and shapes onto a button?
- Error, when trying to change state with useState - Identifier expected. 'true' is a reserved word that cannot be used here.ts(1359)
- How to use axios in Effect Hook?
- How to organize the business logic in React+Redux+thunk
- Redux issue with erroractions may not have an undefined "type" property