Gatsby.js or Next.js - what to choose in 2022?

Next.js and Gatsby.js - what their strengths and weaknesses are and which one is the better choice

Dima Miro
Dima Miro
May 17, 2021
What is the best frame work Gatsby or Next.js
 
When starting a new project, I'm often finding myself choosing between Gatsby.js and Next.js frameworks. So I decided to write a little post about what those things are for and what to choose in 2021.
 
I started my journey with Jamstack from Gatsby js. It was an amazing experience. I fell in love with Gatsby as a framework and Jamstack as an approach almost from the very beginning of coding. And when I decided to run a web agency I pushed Jamstack as a primary architecture and Gatsby as a primary framework to use. I didn't even want to hear that there are alternatives. Gatsby – one love, that's what I thought at that time.
 
But the time was passing by and the team started to look around, then we noticed another great React framework Next. Quite similar at the first glance but different at the same time when looking deeper.

What are Gatsby.js and Next.js all about?

Well, both frameworks are created on top of React. What does it mean?

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.

React on React on Next.js vs Gatsby on agilitycms.com

As I mentioned above, at the first glance they are both fairly similar as they:

  • create an app from boilerplate
  • allow to code a website significantly faster with awesome developer experience
  • generate SEO-friendly and super-fast websites

But there are two common beliefs:

  1. Gatsby.js is for static content only. While some time ago it would be used only for static content that will be stored in CDN, now Gatsby.js offers a complex product that may be used for both static websites and dynamic apps. The glory of Gatsby.js as a static-site generator haunts its creators as they have to make a webinar to dispel this.
  2. Next.js is a server-side rendering-only framework. Well, maybe once upon a time in a faraway galaxy, but definitely not nowadays. From v9.3 we can choose what approach to use: server-side rendering or static site generation.

They rapidly evolve and become kind of monsters.

What do we get?

What you get with Next.js and Gatsby on agilitycms.com

Let's start from the very beginning. We generate a new project, open it, and... see a boilerplate structure that both frameworks kindly prepared for us. Same at the first glance but a little bit different.

Public assets

The folder named public contains built files in the case of Gatsby.js and static assets in the case of Next. The last one creates a .next file for built files.

In both boilerplates, we also have config files where we can provide settings for the project. Both generate different files for us. In Gatsby, a lot of things are going on here. All because of plugins.

Plugins, addons, and libraries

They build the plugin ecosystem around its functionality and community, which is an important feature you’ll definitely notice as it increases the work speed. Imagine you have a plugin for everything, with a minimum setup time, just paste the code and implement almost every external integration. Cool, isn’t it? I’m sure it’s a killer feature for many devs.

Next doesn’t have this kind of functionality, but both frameworks support all React libraries. In a nutshell, you can implement your integrations in both frameworks, it’s just a case of extended time in Next, but Gatsby does it faster (depending on the complexity of integration, obviously).

Routing

And routing. There is a folder page where all our page components will live. Pages will be automatically generated with names of components inside this folder. You should use special link components to route between internal pages.

The rest of the file structure is not really important as you're free to organize it as you wish: components, context, utils, etc.

How does coding feel on Gatsby.js vs Next.js 2022?

Coding on Gatsby vs Next.js on agilitycms.com

Both frameworks were created to make developers’ lives less stressful. Both take care of routine things and allow us to concentrate on the sense of code. They allow us to just create.

Documentation

Learning of both frameworks is not a hard thing if you already know how to build React-based projects. Both Gatsby js and Next js have comprehensive documentation and a lot of tutorials. Just jump into it and get things done!

What makes Gatsby.js sites cool?

In my opinion, Gatsby.js burst into the room just like Jackie Chan and turned the game around. It has a lot of features, a full list of which you can find on their website. I want to mention my favorite ones.

Gatsby plugins (again)

I've already mentioned that Gatsby js built an ecosystem of plugins. You can find a plugin for almost everything you need: a lot of gatsby-components, gatsby-source plugins, gatsby-integrations, etc. Everything is in their plugin directory for free.

GraphQL for everything

Another amazing thing in Gatsby js – GraphQL for all queries. Inside and outside of the project. I had to use it, but now I found it very useful. You can always check your queries in GraphQL Playground that is running together with your project on localhost.

Image optimization

Last in this post but not least – Gatsby.js sites offers image optimization. They prepared an amazing component called gatsby-image, and this component does everything we need for image optimization. And it has an awesome blurred effect when an image is loading.

Gatsby community

Don't forget about community and support. It's an important part when choosing a framework, and I would say that both Gatsby.js and Next.js are doing a great job towards community building. In the case of choosing Gatsby.js, you can rely on their Discord community. You can always find an answer and just chat there.

What makes Next.js so good?

Next.js doesn't have special plugins and doesn't use GraphQL out of the box. It has a special image component too, but it doesn't have a blurred effect 🙂

But Next.js has a lot of other features which make it a favorite of many.

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.

SSG + SSR. What?

Another great thing in Next.js – a hybrid approach. That means that you can combine static site generation (SSG) and server-side rendering (SSR). We got this possibility starting with 9.3 release and I also found it very useful.

The sophisticated way for updating the content

There are a lot of other great features which you can find in their documentation. I want to mention only one more – incremental static regeneration (ISR). Long story short, if you want to get an idea of that, I suggest jumping into the article written by Lee Robinson for Smashing Magazine, where he explains everything about ISR.

Next.js community

Vercel, Next.js’s parent company, hires ambassadors that make high-quality content for the community. I've already mentioned Lee Robinson here, and I suggest taking a look at his YT channel, blog, and Twitter. There is a lot of worthwhile information out there.

What will we get in the end?

When your project is compiled you will get a fast and SEO-friendly website or app. You just have to choose the appropriate hosting platform (Vercel, AWS, Netlify, Cloudflare, etc.) and here we go. Your project is live!

The hosting platform is a topic that is worth making a separate comparison post, which is on my plans. One thing I want to add is that both companies behind those frameworks have their own platforms: Gatsby Cloud and Vercel.

For now, read this blog post from Agility CMS: Choosing a Hosting Provider: Cloud and Jamstack options

Next.js vs Gatsby.js, which to choose?

Gatsby vs Next.js on agilitycms.com

Although Next.js may look like taking leadership, for me, there is no winner in this competition. You can endlessly count the pros and cons of both. In Unikorns, we use both frameworks, and it mainly depends on project needs and structure. Moreover, according to Gatsby’s own comparison, those frameworks are both taking into consideration basic parameters, so it’s mainly a case of personal preferences and skills.

Hope you enjoyed this article and stay tuned!

About the author:

Dima Miro is a Senior Developer from Unikorns. Unikorns is a Jamstack development and design agency from Europe. They make next-gen websites for modern businesses using Jamstack architecture. Unikorns is one of the Jamstack pioneers you need to keep an eye on. Unikorns is Agility CMS partner.

Get in touch with them if you want their help building a Jamstack solution using Agility CMS.

Try it! You can try building both Next.js and Gatsby with Agility CMS easy blog starters

Back to All Articles
Back to All Articles
May 17, 2021

Gatsby.js or Next.js - what to choose in 2022?

Next.js and Gatsby.js - what their strengths and weaknesses are and which one is the better choice

Dima Miro

Topic

GatsbyGatsbyDeveloper ToolsDeveloper ToolsJamstackJamstack
SHARE POST
BlogBlog

How Agility CMS Improves SEO for Gatsby and Next.js Sites

Read More
How Agility CMS Improves SEO for Gatsby and Next.js Sites
BlogBlog

Improving SEO and Social Sharing with Gatsby and Headless CMS

Read More
Improving SEO and Social Sharing with Gatsby and Headless CMS

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

What is the best frame work Gatsby or Next.js
 
When starting a new project, I'm often finding myself choosing between Gatsby.js and Next.js frameworks. So I decided to write a little post about what those things are for and what to choose in 2021.
 
I started my journey with Jamstack from Gatsby js. It was an amazing experience. I fell in love with Gatsby as a framework and Jamstack as an approach almost from the very beginning of coding. And when I decided to run a web agency I pushed Jamstack as a primary architecture and Gatsby as a primary framework to use. I didn't even want to hear that there are alternatives. Gatsby – one love, that's what I thought at that time.
 
But the time was passing by and the team started to look around, then we noticed another great React framework Next. Quite similar at the first glance but different at the same time when looking deeper.

What are Gatsby.js and Next.js all about?

Well, both frameworks are created on top of React. What does it mean?

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.

React on React on Next.js vs Gatsby on agilitycms.com

As I mentioned above, at the first glance they are both fairly similar as they:

  • create an app from boilerplate
  • allow to code a website significantly faster with awesome developer experience
  • generate SEO-friendly and super-fast websites

But there are two common beliefs:

  1. Gatsby.js is for static content only. While some time ago it would be used only for static content that will be stored in CDN, now Gatsby.js offers a complex product that may be used for both static websites and dynamic apps. The glory of Gatsby.js as a static-site generator haunts its creators as they have to make a webinar to dispel this.
  2. Next.js is a server-side rendering-only framework. Well, maybe once upon a time in a faraway galaxy, but definitely not nowadays. From v9.3 we can choose what approach to use: server-side rendering or static site generation.

They rapidly evolve and become kind of monsters.

What do we get?

What you get with Next.js and Gatsby on agilitycms.com

Let's start from the very beginning. We generate a new project, open it, and... see a boilerplate structure that both frameworks kindly prepared for us. Same at the first glance but a little bit different.

Public assets

The folder named public contains built files in the case of Gatsby.js and static assets in the case of Next. The last one creates a .next file for built files.

In both boilerplates, we also have config files where we can provide settings for the project. Both generate different files for us. In Gatsby, a lot of things are going on here. All because of plugins.

Plugins, addons, and libraries

They build the plugin ecosystem around its functionality and community, which is an important feature you’ll definitely notice as it increases the work speed. Imagine you have a plugin for everything, with a minimum setup time, just paste the code and implement almost every external integration. Cool, isn’t it? I’m sure it’s a killer feature for many devs.

Next doesn’t have this kind of functionality, but both frameworks support all React libraries. In a nutshell, you can implement your integrations in both frameworks, it’s just a case of extended time in Next, but Gatsby does it faster (depending on the complexity of integration, obviously).

Routing

And routing. There is a folder page where all our page components will live. Pages will be automatically generated with names of components inside this folder. You should use special link components to route between internal pages.

The rest of the file structure is not really important as you're free to organize it as you wish: components, context, utils, etc.

How does coding feel on Gatsby.js vs Next.js 2022?

Coding on Gatsby vs Next.js on agilitycms.com

Both frameworks were created to make developers’ lives less stressful. Both take care of routine things and allow us to concentrate on the sense of code. They allow us to just create.

Documentation

Learning of both frameworks is not a hard thing if you already know how to build React-based projects. Both Gatsby js and Next js have comprehensive documentation and a lot of tutorials. Just jump into it and get things done!

What makes Gatsby.js sites cool?

In my opinion, Gatsby.js burst into the room just like Jackie Chan and turned the game around. It has a lot of features, a full list of which you can find on their website. I want to mention my favorite ones.

Gatsby plugins (again)

I've already mentioned that Gatsby js built an ecosystem of plugins. You can find a plugin for almost everything you need: a lot of gatsby-components, gatsby-source plugins, gatsby-integrations, etc. Everything is in their plugin directory for free.

GraphQL for everything

Another amazing thing in Gatsby js – GraphQL for all queries. Inside and outside of the project. I had to use it, but now I found it very useful. You can always check your queries in GraphQL Playground that is running together with your project on localhost.

Image optimization

Last in this post but not least – Gatsby.js sites offers image optimization. They prepared an amazing component called gatsby-image, and this component does everything we need for image optimization. And it has an awesome blurred effect when an image is loading.

Gatsby community

Don't forget about community and support. It's an important part when choosing a framework, and I would say that both Gatsby.js and Next.js are doing a great job towards community building. In the case of choosing Gatsby.js, you can rely on their Discord community. You can always find an answer and just chat there.

What makes Next.js so good?

Next.js doesn't have special plugins and doesn't use GraphQL out of the box. It has a special image component too, but it doesn't have a blurred effect 🙂

But Next.js has a lot of other features which make it a favorite of many.

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.

SSG + SSR. What?

Another great thing in Next.js – a hybrid approach. That means that you can combine static site generation (SSG) and server-side rendering (SSR). We got this possibility starting with 9.3 release and I also found it very useful.

The sophisticated way for updating the content

There are a lot of other great features which you can find in their documentation. I want to mention only one more – incremental static regeneration (ISR). Long story short, if you want to get an idea of that, I suggest jumping into the article written by Lee Robinson for Smashing Magazine, where he explains everything about ISR.

Next.js community

Vercel, Next.js’s parent company, hires ambassadors that make high-quality content for the community. I've already mentioned Lee Robinson here, and I suggest taking a look at his YT channel, blog, and Twitter. There is a lot of worthwhile information out there.

What will we get in the end?

When your project is compiled you will get a fast and SEO-friendly website or app. You just have to choose the appropriate hosting platform (Vercel, AWS, Netlify, Cloudflare, etc.) and here we go. Your project is live!

The hosting platform is a topic that is worth making a separate comparison post, which is on my plans. One thing I want to add is that both companies behind those frameworks have their own platforms: Gatsby Cloud and Vercel.

For now, read this blog post from Agility CMS: Choosing a Hosting Provider: Cloud and Jamstack options

Next.js vs Gatsby.js, which to choose?

Gatsby vs Next.js on agilitycms.com

Although Next.js may look like taking leadership, for me, there is no winner in this competition. You can endlessly count the pros and cons of both. In Unikorns, we use both frameworks, and it mainly depends on project needs and structure. Moreover, according to Gatsby’s own comparison, those frameworks are both taking into consideration basic parameters, so it’s mainly a case of personal preferences and skills.

Hope you enjoyed this article and stay tuned!

About the author:

Dima Miro is a Senior Developer from Unikorns. Unikorns is a Jamstack development and design agency from Europe. They make next-gen websites for modern businesses using Jamstack architecture. Unikorns is one of the Jamstack pioneers you need to keep an eye on. Unikorns is Agility CMS partner.

Get in touch with them if you want their help building a Jamstack solution using Agility CMS.

Try it! You can try building both Next.js and Gatsby with Agility CMS easy blog starters

About the Author
Dima Miro

Topic

GatsbyGatsbyDeveloper ToolsDeveloper ToolsJamstackJamstack
SHARE POST
BlogBlog

How Agility CMS Improves SEO for Gatsby and Next.js Sites

Read More
How Agility CMS Improves SEO for Gatsby and Next.js Sites
BlogBlog

Improving SEO and Social Sharing with Gatsby and Headless CMS

Read More
Improving SEO and Social Sharing with Gatsby and Headless CMS

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

Take the next steps

We're ready when you are. Get started today, and choose the best learning path for you with Agility CMS.

Get startedRequest a Demo