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 to the table 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 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.
The biggest selling point of NextJs is server-side rendering out of the box.
People will tell you that Google crawls javascript and that it's sufficient to serve up an almost-empty html document with
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. Do you think a web app like Yelp or Reddit would ever resort to client side rendering for the bulk of their content? They would drop off the map in search.
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.
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 strengths and limitations. One of the limitations is that you can only make a client-side fetch request in top-level page components.