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.
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.
<div class="root"></div> along with a massive bundle.js.
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.