Blog rewrite - migration from Gatsby.js to Next.js

After a bit of a break, I'm thrilled to be back with a fresh blog post. As you may have noticed, this one differs from the usual travel and photography content. Thanks to my wife's suggestion, I've decided to diversify the topics I cover here on the blog. My blog, my rules.

In today's post, I'll walk you through some recent changes I've made to the blog.

Behind the scenes, I've given the blog a complete makeover. I said goodbye to Gatsby.js and embraced the tech-savvy Next.js. Additionally, I switched the Content Management System (CMS) from Contentful to the highly flexible Sanity CMS.

I won't bore you with the technical details of these transitions, as plenty of content is out there. However, if you have questions about migrating from Gatsby.js to Next.js or moving from Contentful to Sanity, feel free to

on Twitter, and I'll do my best to assist you.

Now, let's get into the changes.

Backend changes:

• Sanity Revalidation Webhook: I've set up a Sanity revalidation webhook to ensure the cache is refreshed automatically after publishing new content.
• Translations: I have added keys to support the English language.
• Database Duplication: I've added a feature to duplicate the production database to my development environment, so I always work with a fresh website copy during development.

• Server-Side Magic: I've taken advantage of Next.js's server-side rendering capabilities to boost performance, moving many components to SSR for a faster experience.
• Database Schema Update: I've updated the schemas to accommodate tags and keywords.

Frontend changes:

• Back-to-Top Button: I've fixed a bug that was causing the back-to-top button to display improperly on smaller screens.
• Accent Colors: Adjusted the accent colours for better readability against the white background.

• Predictable Keys: I've replaced the use of math.random() in JSX components with more predictable and consistent keys.

• CSS Improvements: Addressed various CSS issues and made performance optimizations.
• Lightbox Revamp: Improved the lightbox rendering method to ensure it doesn't break even if external resources fail to load.

What's Coming Up:

• Category Tag Filtering: Soon, you can filter content by category tags. | Implemented 2023.10.25
• Pagination: I'm currently working on implementing pagination for a smoother browsing experience.
• New Languages: In the pipeline are Spanish, French and Italian translations to make the content more accessible to a broader audience. | Implemented 2023.10.24
• Farewell to Social Beaver: The Social Beaver project will go offline, and its link will be replaced with a detailed project description post. | Implemented 2024.04.22
• Related posts filtering: The feature will show only posts with related tags when there is more content on the blog.

Stay tuned for these exciting developments, and, as always, thank you for being a part of this journey.