Next.js versus Create React App
Which one should you use for your next application?
React is a great library to create dynamic web applications that are simple and efficient. There’s a couple main ways to create a new React application, the most common (and officially supported) being the create-react-app tool.
Create-React-App
Create-React-App is a boilerplate that allows us to scaffold and create new React applications. It wraps around tools like Webpack and Bable inside easy to run scripts called react-scripts . This helps you create great and functional React code without having to mess around with low-level configuration.
This also means that updating your React project is easy, react-scripts is simply updated to a new version and you don’t have to deal with version mismatch across various tools.
Next.js
Unlike Create-React-App, Next.js is a framework for creating React applications. It supports server-side rendering, static site generation, serverless API functions, and much more right out of the box. It’s a great framework that gives you everything needed to create awesome React applications.
Lets ask some questions that might help you come to a decision over which framework to use!
Do you care about SEO?
Search Engine Optimization (SEO) is important when creating websites that you want to be ranked well in search algorithms. For example, if you’re creating a landing page or company website, SEO will matter to you. If you’re just creating a web application that’s mostly behind a authentication wall, this probably doesn’t matter as much.
If you care about SEO, Next.js is the framework for you. Since it supports Server Side Rendering (SSR) right out of the box, you’re guarenteed to have better SEO from the get-go.
Do you want an un-opinionated option?
What create-react-app does great at is leaving the developer many options for their site. With Next.js, there are various packages pre-installed that you’re forced to work with (such as routing). Create-React-App gives you a bit more flexiblity to choose which libraries you want to work with.
Do you need to customize your Babel or Webpack configuration?
Next.js makes it really simple to extend or configure Babel or Weback within the framework. Adding babel or webpack plugins is much easier with Next.js versus Create-React-App.
Do you want a statically generated site?
Next.js supports statically generated sites right out of the box. This means you can build an application that compiles down to prebuilt HTML, CSS, and JS code and sends it directly to the client, without having to “render” or “generate” this code on the fly. This can be a massive boost to load times, since there’s no actual presentation logic that has to be run every time a page is loaded.
Is your site gated?
If your web application is just available to authenticated users, it loses many of the benefits of server-side rendering. In this case, client-rendered applications work just fine, and are considerably easier/cheaper to host.
We hope this article gave some insights into the differences between Create-React-App and Next.js and help you decide which one to use in your next project! Any questions? Feel free to leave a comment or contact me!
Keep in Touch
There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running and growing companies. You can signup for my newsletter here
Feel free to reach out and connect with me on Linkedin or Twitter.
