Moved to Next.js with Contentful CMS for my static site
It’s been almost two years since I deployed my Gatsby driven static blog with Amplify and S3. Read the full story here. Overall it worked great: the performance was amazing, it was easy to get started, keeping the costs low.
But there were several problems. Gatsby requires you to use GraphQL to get initial data into your components, which is helpful as it brings a powerful tool to explore the schema of the available data that’s generated by the installed plugins using the strong type system. But that can often seem to be an overcomplicated solution.
Another, more significant issue, that I ran into was that Gatsby relies heavily on the plugins, while offering a wide selection, still sometimes lack certain functionality or have some limitations. Dealing with source code of a third party plugin (for my very specific needs) was the main reason for me to change frameworks.
Luckily as of recently Next.js announced the support for Static Site Generation (SSG). It originally was used for Server Side Rendered (SSR) web applications. It offers much more flexibility, but it’s much less opinionated compared to Gatsby.
The migration was quite straightforward and well documented for Next.js. I was able to achieve the same lighthouse score and customize the functionality to my needs.
As I decided to invest more time in my Blog, integration with Contentful was a logical next step to simplify the content management. It comes at no cost for my needs. Instead of keeping all data for articles in json or markdown formats on GitHub I was able to use API client. Quite a major refactoring, right?
There is a catch, though. Next.js image optimization for statically generated websites (with next export) is not supported, unless you deploy it on Vercel. I am quite happy, so far with AWS Amplify and don’t want to migrate. And serving unoptimized 4k images had a significant impact on performance (and is disrespectful towards visitors that use mobile cellular network). The solution was to use next-image-export-optimizer open source package and a custom script that I wrote to load all assets from Contenful into public directory. After that, next-image-export-optimizer was able to convert those images to all sizes for the main device sizes and serve them through it’s ExportedImage component, which is based on the next/image.
Check out the source code for details!
