NextJs is a new project with a lot to offer.
The comparison between NextJs and Create-React-App is an apt one. What NextJs brings is great defaults. Like Create-React-App, NextJs is opinionated. It makes choices for you about what an ideal React setup should look like.
Here are the biggest differences between Create-React-App and NextJs.
Create-React-App Is Ejectable, NextJs Is Extensible
Create-React-App uses babel, webpack, and eslint but “hides” this tooling and bundles it together in react-scripts. But Create-React-App doesn’t lock you in; when you’re ready to depart from training wheels you can unmask these dependencies and then configure them.
NextJs, on the other hand, provides great defaults with the option to configure tooling if you want to. For example, you can override (or extend) NextJs’s webpack configuration by adding a webpack.config.js file. Or you can add an express server if you don’t want to use NextJs’ server.
NextJs is Out Of The Box
The biggest point of NextJs is server-side rendering.
root class along with a massive bundle.js.
Styling is A Pain With NextJs
NextJs can be a pain with styling. Out of the box, NextJs uses styled-jsx, which is OK. But what if you want to use SASS or styled-components? You’re in for a few hours of frustration.
You Can’t make API Calls In Components With NextJs
Initializing a new NextJs project creates two directores ./pages and ./components.
Pages are like container React components. But they have more significance than simply wrapping other components. Page components are literally rendered into pages with a little help from react-router. That is, http://localhost:3000/about points to ./pages/about.js. This approach has strengthes and limitations. One of the limitations is that you can only make a client-side fetch request in top-level page components.
Create-React-App Vs NextJs: Comparison Table
|Create React App||NextJs|
|Dependencies||One (react-scripts)||One (next)|
|Code-splitting||Can be configured||Out of the box|
NextJs is a good start if you need SSR first, SEO friendly with lots of public content. But if you build a highly dynamic statically deployed Single Page Application client, CRA (Create React App) is better suited for that.
So for blog, news, with lots of public content and shareability, I’ll go with NextJs. For dashboard, admin, apps, I’ll go with CRA (Create React App)