Next.js vs Gatsby in 2021 - Which one to use in the next project?

Next.js and Gatsby are both frameworks for React. Both Gatsby and Next.js exist to lay the foundations of a React app. It means that you have all React foundations that give you a create-react-app boilerplate plus additional features, toolkit, and guidelines of how the app should be coded on top.

Similarities between Next.Js and Gatsby:

• Provide a boilerplate application.
• Generate high-performant, accessible and SEO friendly websites.
• Create Single Page Applications out-of-the-box. This SPA includes cool inbuilt features like Reloading out-of-the-box, Code Splitting, Prefetching, Routing, and Caching.

What Does Gatsby Do Well?

Plugins

Plugins are pre-made Node.js packages that allow you to plug pre-built functionality into your website

Gatsby has plugins ecosystem around its functionality, which increase the work speed. Gatsby has plugins for many things, with a minimum setup time, just paste the code and implement almost every external integration.

An example of a plugin:

You can install special plugin for fetching videos from a list of Youtube channel or scraping the posts of an Instagram account and display it on your website.

You don’t need to visit the Youtube or Instagram documentation and generate API keys. Plugins saves time and facilitate work.

GraphQL

Gatsby uses GraphQL out of the box to enable page and StaticQuery components to declare what data they and their sub-components need. Then, Gatsby makes that data available in the browser when needed by your components.

Gatsby uses GraphQL at build-time and not for live sites. This means you don’t need to run additional services (e.g. a database and Node.js service) to use GraphQL for production websites.

An example of a GraphQL query:

If you want to get only title from siteMetadata when in fact the siteMetadata object contains a lot more information. You are able to specifiy exactly what piece of information you are after.

Themes and Starters

A starter is a boilerplate Gatsby site that users can copy and customize. Gatsby offers official starters for a default site, blog site, bare-bones hello world site, and both using and creating themes.

So, if you want to create a shop, then I can find a relevant starter or theme that have the required functionality - a cart, a link to Stripe etc.

What Doesn’t Gatsby Do Well?

The fact that Gatsby focuses to intensely on the plugin ecosystem means that it is often hard to diverge from these. If you need to create something which there is not already existing plugin for. Then create a plugin from scratch to cope with potentially functionality that would be a quick thing to implement in a non-Gatsby app is made more complex. You need to edit the gatsby-node.js file and create a custom Webpack config.

Whilst GraphQL is good tool, one of the main purposes of GraphQL is lost in this case. GraphQL is uses to cure over-fetching, but Gatsby’s main use case is Static Sites, which means that fetching all of the data from the API’s will cause no extensions to runtime, it would take more time at build time granted, but for flexibility that seems a worthwhile trade.

Gatsby is better for smaller applications, because if you have a massive amount of data you are going to want to potentially implement Server Side Rendering. GraphQL in that case, is not best tool.

Another flaw is that however in Gatsby using GraphQL aren’t strictly necessary to pull data into a Gatsby site using Gatsby without GraphQL. But using Gatsby without GraphQL is a work around.

What Does Next.js Do Well?

Flexibility

The main argument for Next.js is flexibility. Next.js didn’t force the developers into an ecosystem of plugins and GraphQL. Pre-render pages at build time (SSG) or request time (SSR) in a single project and give the developers to choose one or the other and switch between the two is a huge gain for Next.js flexibility.

If your project will to scale over time and you will add complexity or you think that SSR would be the best way of doing your project. Then Next.js will better choice. That wouldn’t be possible in Gatsby. So taking scalability into consideration when starting a project and going with the more flexible solution.

Static Site Generation (SSG) functionality

Next.js works with the filesystem routing and GraphQL is not uses out of the box. If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps. There is even a feature called ‘Incremental Static Generation’ which means you can register new static pages at run time.

Serverless functions

For example, API folder is generated from the start. I didn’t mention it in the previous block, but it’s worth it for sure. Every js file in this folder will be executed as a serverless function when a project is hosted on Vercel or Netlify. These functions handle logic like user authentication, form submission, database queries, custom slack commands, and more.

What Doesn’t Next.js Do Well?

Next.js ecosystem does not have so much templates and starter projects that make it quick and easy to get a project up and running as it is with Gatsby

Use cases for Gatsby

1. Corporate websites (companies, service websites, marketing information sites)

2. Small blog websites handled by predictable number of private users

3. Public pages for any B2B or SaaS product websites

4. Small eCommerce Websites

Requirements:

• Simple static websites with tens of static webpages (number of pages are predictable)
• Some pages are updated often; most of them are not updated regularly
• Website should support SEO
• Different users visiting a static website will see the same content
• Updates doesn’t need to reflect real time since its updated by internal team, not by the visiting user
• No login & register functionalities
• Integration with CMS (Headless CMS). It isolates the data and website so that even non-programmers can edit the content elsewhere

Gatsby wins because:

Since the number of pages is predictable and the content doesn’t change, Gatsby is perfect for building these websites.

Shorter development time with a wide range of Gatsby plugins, starters, themes.

Gatsby offers support for plugins to get content from almost all CMSs, databases, REST APIs, and GraphQL. It also has plugins that support different data formats like JSON, Markdown, and MDX.

Websites built with Gatsby:

Corporate websites built with Gatsby as main React framework:

• Figma
• Digital Ocean

Small blog websites built with Gatsby as main React framework:

• National Geographic
• Vanity Fair
• VSCO Engineering

Public pages for any B2B or SaaS product built with Gatsby as main React framework:

• Venmo
• Smartthings.com

Small eCommerce Websites built with Gatsby as main React framework:

• VRBO.com
• Little Caesars

Use cases for Next.js

1. Large multi-user websites (Blog where different users can post their content, Any online forums, Web portals, News sites)

Requirements:

• A large multi-user website with content added by authenticated users (real-time publishing)
• The website content are public, only certain features are private
• Content will be shown dynamic based on logged-in user and their interests
• Content is frequently updated or needs to be always up-to-date

Next.js wins because:

We can’t compile static HTML for each user with Gatsby. For Gatsby, the major disadvantage for creating such websites is the time taken for the building process. We can’t afford to rebuild the whole website, as it would take ages to do it with SSG. Users often want to see their content in real time, not after a few minutes through a build process. “real-time” means rendering needs to be done constantly, with the newest data available. Since the content is created by a large number of users and gets incremented when new users join, it will be practically impossible to compile to a static site in build time. It’s much easier to show the relevant content in runtime. And if the number of users is high, it could take up to a few hours. Even the static blog content needs to be published in real time and accessible for editing by the user. In such cases, build time-based frameworks won’t work well.

SSR is needed for public content. SSR will help to render the site based on authentication.

Large multi-user websites built with Next.js as main React framework:

• IMDb
• realtor.com
• Hashnode
• TV Publica

Hybrid web apps (Large Social Networks and Community-based Websites)

Requirements:

• Rendering the page UI using SSR
• Handling data responsibility to the client-side React application
• Inside a single web application, it supports both SSR for visitors and CSR for users who are logged in
• A large multi-user website with content added by authenticated users (real-time publishing)
• Content is frequently updated or needs to be always up-to-date

Next.js wins because:

Most of the pages today need to be optimized for Search Engines, and since the content is usually dynamic in these kinds of pages. type of app is best built using Next.

For hybrid web apps that doesn’t require SEO, both Gatsby and Next.js are capable. But for applications that require SEO for publicly accessible dynamic content, then Next.js is the best option.

Hybrid web apps built with Next.js as main React framework:

• TikTok
• Twitch
• Patreon

3. Big eCommerce Websites

Requirements:

• Speed
• Content is frequently updated or needs to be always up-to-date
• Integrations with third-party systems like: PIM, marketing automation, ERP.

Next.js wins because:

If a small change will come, it needs to be visible everywhere, therefore, the production of SSG pages would take ages in that case.

Big eCommerce Websites built with Next.js as main React framework:

• Walmart
• Hilton
• Trip.com
• Deliveroo
• Ticketmaster

Use cases in which you can choose Next.js or Gatsby

1. Client-side rendered applications (SPA/MPA)

Requirements:

• Building a web application for your product, whether it’s an SPA or a multi-page client-side application
• The application will be visible only after authentication
• SEO is not necessary; the whole application is dynamic
• Super performant
• Ability to support feature rich apps
• Great user experience. Speed and fast response times for the user
• The goal is faster transitions that make the website feel more like a native app

Verdict:

So for dynamic web applications, both Gatsby and Next.js are equally capable

Client-side rendered applications (SPA/MPA) built with Next.js as main React framework:

• Hulu
• Binance
• Fubo.tv

Client-side rendered applications (SPA/MPA) built with Gatsby as main React framework:

• Vote.org

Use cases for only Next.js or Gatsby + Next.js

1. Hybrid web app and website in a single codebase

Requirements:

• Rendering the page UI using SSR
• Handling data responsibility to the client-side React application
• Inside a single web application, it supports both SSR for visitors and CSR for users who are logged in
• A large multi-user website with content added by authenticated users (real-time publishing)
• Content is frequently updated or needs to be always up-to-date

If you have a company website and a web app product. And you want to build it with single codebase, not as two independent sites. In such situations, it’s much easier to handle both with Next.js and Gatsby, too. We can render the static pages for the company website and CSR for the web app product. The same way, we can utilize SSR for the website and a combination of SSR plus CSR for the web app.

Verdict:

We can use only Next.js or we can combine SSR plus CSR

Another websites built with Next.js as main React framework:

Corporate websites built with Next.js as main React framework:

• Starbucks Reserve
• Marvel
• Ferrari
• Lego
• Nike Help

Small blog websites built with Next.js as main React framework:

• Netflix Jobs

Public pages for any B2B or SaaS product built with Next.js as main React framework:

• GitHub Copilot
• Elton John

Small eCommerce Websites built with Next.js as main React framework:

• AT&T
• Shake Shack

Conclusion

Next.js is more versatile and flexible. If your project might dramatically change or has the potential to grow beyond its current spec, you should go with Next.js. Also Next.js is used by big companies much more often than Gatsby. With Next.js you can do all that you can do with Gatsby and much more.

Gatsby, in turn, makes it easier to get up and running quicker and achieve more with less coding. If you want to build something that is unlikely to diverge much from the current spec, you can go with Gatsby.