Create React App vs Next.js
As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SAAS web apps.
In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript and React vs Vue vs Angular vs Svelte. This time, let’s take a look at Create React App (CRA) vs Next.js.
CRA is a tool that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project. This is great to start focusing on building your application from the start and don’t waste time configuring your webpack etc. But for building performing production-ready applications, you might need a little bit more. You might need serverside-rendering for SEO, or code-splitting to increase performance. You could use a boilerplate that has some features built-in (like React Milkshake), or you can take a look at a framework like Next.js.
Next.js
Next.js is a framework built by Vercel. It’s open-source, based on Node.js and Babel, and it integrates with React to develop single-page applications. It makes Serversside rendering very easy. According to nextjs.org:
With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.
Next.js also supports static exporting, pre-Rendering, and has a lot more nice features like automatic building size optimization, faster dev compilation, and preview mode.
In my opinion, the current version of Nextjs is what React was missing for a long time. It has all the features you need when you build a production-ready application that needs to perform. Also, the docs are nice and it’s becoming more and more popular among front-end developers.
Next.js is really good, but that doesn’t mean you should always go with this framework.
Although it makes server-side rendering a lot easier, it still introduces some complexity. For instance, if you use Redux, your store should also be in sync on the server. And when you use translated labels inside your application, be aware that this must also be handled on the server.
Also, for every server-rendered route that you have, a serverless function will be created. Currently, the free tier a limitation of 12 serverless functions, so if you use SSR and your app has more than 12 routes you need to pay for hosting. This might not be a problem for everybody, but when you build your app with CRA you are sure you can host it on platforms like Vercel, Netlify, or Render for free. I wrote an article that dives a little deeper into this, you can read it here: Why I Migrated From Next.js to Create React App
Conclusion
CRA is a great starting point for your next app, but to take things to the next level I think Nextjs can come in handy. It does introduce a little more complexity in certain areas and I’m not really happy with serverless functions limitations, but I think Next.js offers so many nice features that my decision is clear: Next.js.
If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.
If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.
