Next.js versus Create React App

Which one should you use for your next application?

Image for post
Image for post
Photo by Kevin Bhagat on Unsplash

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.

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.

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.

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.

Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

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

Written by

Passionate about building cool shit. First-year undergrad student studying EECS and Business @ UC Berkeley MET Program and software developer at Carline

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store