DEV Community

Discussion on: Taking Gatsby for a spin

Collapse
 
emasuriano profile image
Emanuel Suriano

Great article! I always see Gatsby and think: What are the benefits comparing it with next.js? The only thing that I could think is that it has a bunch of tools built-in (for example, GraphQL) but besides that in my opinion, next.js could easily replace Gatsby.
I want to hear your opinion on this comparison: Gatsby vs next.js!

Collapse
 
ardennl profile image
Arden de Raaij

That's a great question! I've yet to have any experience with Next.js and to be honest, up until now I didn't realize what it was exactly. A comparison is a great idea and something I'll pick up soon. Thank you for the inspiration!

Collapse
 
ardennl profile image
Arden de Raaij

I went through the tutorial of Next.js and have a few quick observations:

  • Next.js leverages 'Universal Javascript' and can be used to create a (partially) server rendered app as well. Gatsby strictly generates static assets.
  • Gatsby.js comes with GraphQL baked in, circumventing graphQL might be difficult. Next.js has an async/await function to pre-populate your components props with data you can pull from anywhere. If you want to use GraphQL you can combine next.js with Apollo.

  • In general, Gatsby is more opinionated. It has it's own plugin ecosystem (including data handlers), aggressive pre-fetching, the whole PRPL pattern and the works. It still leaves you very free in how you write and style your components though. Especially for static site generating, Next.js is more barebone and you'll need to configure which links you want to pre-fetch and which assets you want to lazy-load.

I can't say anything on performance with building because I've yet to actually build something with Next.js yet.

Also, there's React Static, another contender in the ring. I might give that one a go as well.

Collapse
 
emasuriano profile image
Emanuel Suriano

Great answer, I agree with you.
So we can affirm that if we want to build the same application in Gatsby and next.js, we will have to put a lot more effort in the next.js one.
But in the case, we want to expand the application to have any dynamic behavior, Gatsby won't suit.