Gatsby vs Next.js: Blog Starters Showdown ⚔️
Yesterday I switched from using Gatsby to generate my blog to Next.js. I had forked Gatsby's blog starter, and just forked Next.js's blog-starter-typescript example. Here I'll narrate my experience with both of them, and pit them against each other in a blog-on-blog showdown!
Gatsby's more barebones approach to styling and layout match my taste better than Next.js's more filled-in blog template. Gatsby's plugins make it easy to add functionality, and Next.js doesn't have anything comparable. I'd recommend Gatsby to people picking between the two, but I'm not reverting my switch to Next.js any time soon.
It was real easy to get started with Gatsby. I felt comfortable deploying the starter mostly it as-is, and the plugins made it real easy to add functionality. I used the gatsby-remark-prismjs plugin to add syntax highlighting to my code blocks.
The starter wasn't 100% to my liking though. To understand everything in the starter you need to know GraphQL, which I don't. I opted to ignore the query under each page and pray they didn't break.
Next.js's starter blog needed more tweaks before I was ready to use it. The most glaring issue was that the example wouldn't start.
next ready - started server on http://localhost:3000 error - ./styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/index.css) Error: PostCSS plugin postcss-nested requires PostCSS 8.
The starter looks to be make for a blog with multiple contributors, meaning I had to delete a bunch of stuff, and it is missing and RSS feed. (Although it does have have a link to a RSS feed in its head 🤔)
Adding code block syntax highlighting was a real hassle. Maybe I just don't know what to search for? I Eventually I ended up looking through the source code for gatsby-remark-prismjs, and didn't see anything Gatsby specific. In fact, it's not Gatsby-not-specific enough that I was able to use it with Next.js! The only price I appear to be paying is a new warning on
warning " > email@example.com" has unmet peer dependency "gatsby@^2.0.0".
You think they'd take a pull request to remove the Gatsby dependency? 🤔
Out of the box Tailwind CSS is used for styling. Tailwind had been getting a lot of good press recently, so it seems like a good choice? if I didn't already have styles from the Gatsby version of my blog I likely would have kept it around.
Pros and Cons
- 👍 Out of the box the template was a good fit for my needs
- 👍 Rich plugin ecosystem makes it easy to enhance your blog with new functionality
- 👎 Requires learning GraphQL to take full advantage of its capabilities
- 👎 No out-of-the-box TypeScript option
- 🤷♂️ Typography.js is used for styles out of the box
- 👎 Doesn't have anything to match Gatsby's rich plugin ecosystem
- 👍 Tailwind CSS is used for styles out of the box
- 👎 I got a build error when starting the example for the first time