Next.js vs. Gatsby vs. Create React App

There's never been a better time to learn React. If you're just getting started, you might have heard about these three options:

However, it's not exactly clear when or why you would choose one over the other. This post will highlight the key similarities and differences between the three solutions.

Next.js

Next.js is a hybrid React framework that evolves with your product. With Next, you can have static pages, server-rendered pages, and more all within the same framework.

Update (2020): I now work at Vercel, so I'm biased towards Next.js. The cons listed below are the most common pain points from the community.

Pros

✅ Supports static sites and server-side rendering
✅ Best DX out of the three (Webpack support, Fast Refresh, error handling)
✅ Create full-stack apps with API Routes

Cons

⛔️ Lack of built-in support for layouts
⛔️ Limited plugin system (RFC)
⛔️ Server-rendering adds complexity

Gatsby

The key difference between Next.js and Gatsby is that Gatsby doesn't use a server. While Gatsby's main use case is for static sites, it can also re-hydrate into a fully-functional React application.

Gatsby comes bundled with GraphQL for data fetching. Here's a short example.

import React from 'react';
import { graphql } from 'gatsby';

const HomePage = ({ data }) => {
  return <div>{data.site.siteMetadata.description}</div>;
};

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`;

export default HomePage;

You can use Gatsby without GraphQL if you absolutely must, but it's one of the key features it promotes.

Pros

✅ Robust plugin library
✅ GraphQL integration

Cons

⛔️ GraphQL knowledge potentially needed
⛔️ Debugging plugin issues can be difficult
⛔️ Potentially large build times (e.g. lots of images/fetches)

Create React App

CRA helps you get started building React apps immediately with client-side rendering (CSR). There's much less to digest and understand. Unfortunately, that also means there's less you get for free as you scale your application. When building large-scale React applications, especially those with marketing pages, having server-rendering in the framework is very helpful.

Pros

✅ Easiest to learn
✅ Best choice for guaranteed single-page applications
✅ More hosting options (since a server isn't required)

Cons

⛔️ No server-side rendering
⛔️ No code-splitting out of the box (can be configured)
⛔️ Requires client-side routing library (e.g. React Router)
⛔️ "Ejecting" for custom use cases can add complexity

Conclusion

Still not sure which one to choose? I would highly recommend reading Rendering on the Web for a deep-dive on where your rendering logic should live.