Gatsby or not Gatsby. What's Next 😍?

Disclaimer: I'm a Big Gatsby fan and I built multiple website with it. I love its simplicity especially the rich plugin ecosystem. That is brilliant! I also love theme-ui that is the css-in-js library made by people from Gatsby, I'm using it literally every time I can.

I wanted to start a new project. I knew that this time it would have been slightly bigger than my usual pet projects. I was going to build a full website with a possibility to turn it into an e-commerce lately. (And I did btw cascinarampina.it)

I thought a lot about it, I felt quite confortable in starting it with Gatsby but I also wanted to use this opportunity to try something new. Since Next.js just came out with its beautiful version 10 I decided to give it a go. I have to say, that was 🤯

Before talking about Next.js I have to spend a couple of words about the CMS choice. In the past I tried Netlify Cms, Dato, Sanity and I evaluated a few others... As a "Single Front End" engineer I'm always looking for something easy to configure and possibly free or at a very low cost. All those solutions are brilliant and let you build whatever you want at no cost. But for this project I thought I might have needed something more than the free tier especially with form submissions so I looked elsewhere.

Wordpress! Right! Not long time ago I promised myself I would never touch Wordpress again. And here I was, finding myself 😉 to WP again. I don't regret the choice! With the help of a few plugins Wordpress it's a very valid choice as an headless CMS. Not to mention that I could delegate the data entry to the friends I was going to make the website for. Life is beautiful!

Next.js

I have to say I'm impressed by how simple it turned out to set up to go from 0 to have a website up and running fetching data from my CMS. I don't have experience with previous versions but v 10 it's brilliant. All you need to know about the new release is that there are 3 possible functions you need/can export from your page components. No other configurations. Nothing else. It's a bit weird to have those "random" functions at the end of your component but once you understand them it just clicks!

getStaticProps (Static Generation) 🔗

This is the function I used most and it's the function that lets you pass props to your page at build time, that means you are creating a Server Side Generated page (SSG)

getStaticPaths (Static Generation) 🔗

This is the function you use to generate pages dynamically. The file name should be something like [slug].tsx and Next will be able to generate pages for every slug the function returns. It works well with getStatiProps.

getServerSideProps (Server-side Rendering) 🔗

This is the function that turn your page in a Server Side Render page (SSR)

The functions above are mutually exclusive, you can't have getServerSideProps and getStaticProps functions exported from the same page.

But basically at any given point you are free to decide to have an SSR or SSG page and have a webiste that mixes the two approaches. To be fair my SSR pages are very slow to render, probably due to my CMS 😅 performances, so I opted for having all the pages generated at build time.

Another killer feature is the ability to add NodeJS endpoints directly in the same app. Well done to whoever thought of something like that, if I only think at the possibilities, it's incredible for me. Being able to generated a static site at build time and have node endpoints it's just WOW! For instance you'll be able to call resources protected by CORS and provide them to your ui being on same origin. 💣

All of this with no setup at all! No custom servers nothing more than what is built-in in Next.js

Not everything is 💅

Unfortunately, despite of all the above awesomeness I also found a few things that I didn't enjoy and here the comparison with Gatsby kicks in in their favour.

1. Showing Active Links in the menu bar. There is not a simple prop in next/link component. It's not complicated to build your own and listen to routes changes to adapt the style. But it's some more work to do to accomplish such a simple thing.

2. To generate an xml sitemap ain't easy. There are a few examples out there, feel free to look at my implementation if you wish or look at this issue to have some ideas, anyway, thinking at the Gatsby way I 😭 a little loosing my nights handling SEO related tasks.

3. To add Google analytics and send correct data you need some custom implementation, that's not that bad but again in Gatsby, with its official plugin comes (almost) for free.

4. To generate manifest and app icons I used an empty Gatsby instance, another very useful plugin I can't live without. 🙀 So ok, this isn't something bad about Next, but something I missed here for sure.

Conclusion

I really enjoyed this project and Wordpress + Next.js seems quite a solid choice for my next project(s).

In the meanwhile, though, I made on my personal website danielebertella.com and I decided that there was no point in using Next.js.
To build a static website in a night Gatsby is still the best choice for me.

Right now I can't decide what's better actually. I'm looking forward to what Gatsby team are going to release next, I heard quite nice stuff are coming. We shall see!

And you? What would you choose for your next project? Let me know! I'm super interested in the topic!

---

Cover image from cascinarampina.it
Thanks Mike for the proof reading 😉