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.
One of the biggest pain points in starting a new javascript App is the tooling. Webpack, babel, and the like can be a pain to setup, especially with the aggressive release cycle of open source javascript projects. As of this writing you’re probably already using Webpack syntax that’s been deprecated.
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.
People will tell you that Google crawls javascript and that it’s sufficient to serve up an almost-empty html document with root class along with a massive bundle.js.
It’s true that Google crawls javascript. But this just isn’t a good approach for apps that are content-focused and need to expose their content to search.
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) |
| Ejectable | Yes | No |
| Extensible | No | Yes |
| Isomorphic/Universal | No | Yes |
| Zero-configuration | Yes | Yes |
| Service workers | Yes | No |
| Hot-reloading | Yes | Yes |
| Code-splitting | Can be configured | Out of the box |
Conclusion
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)