Why I choose Next.js and Sanity for my new blog

The big move...

One of the main reason I've always love doing this job is the fact that technologies are always evolving for the better. They are constantly improving ways to do more with less. And it still happening nowadays with the latest Jamstack technologies such as React.js, Next.js and Sanity to name a few. I see it as a kind of technology revolution.

As a Software Engineer, I've got to keep up to date with the latest technologies and because no Software Engineer knows everything, the more you know, the better your web applications will be, and the better the user experience will be as well. And this is the main reason why I've decided to upgrade my knowledge and move my personal blog into the Jamstack world to experience the REAL experience on the ground.

And this is also the reason I've written this article in hope that it can help anyone's willing to move into the Jamstack world, also looking for choosing the right technologies from the start to build and scale your online business without having to restart from scratch as technology evolve.

Overcoming challenges

Despite my huge IT background mixed with my latest web skills it was still difficult to get there. But I finally succeeded and the end results paid back. The proof is that I'm now having this blog which is entirely using the latest Jamstack technologies giving much better SEO results with Lighthouse scores over 90% on almost every single pages.

My first challenge has been to learn React developed by Facebook which required a brand new way to think when developing. In the end, you have to think in React. Briefly, React is a Javascript library that help you build dynamic user interfaces.

The main approach to adopt while developing in React is to split your application elements in components. It was a bit confusing at start, specially for an object oriented programmer like me, but once you catch the idea behind the library, the end result is a much better code which is much easier to maintain while the application is growing. This is a huge productivity boost for a developer.

My second challenge has been to find a framework to build and host my website which is now a progressive web application (PWA). There are many solutions available out there each offering different advantages depending on your needs.

After giving a try to Gatsby, which is a great framework as well, I've switched to Next.js because it allows me to do more with less in the end.

My third challenge has been to find a way to host and manage my blog content. Since React is used to only manage the UI (frontend) part of a Web application, you need another technology to host and manage your content (backend). That's what I call the CMS Stack or the Content Stack.

The CMS Stack could be WordPress, Magento, Joomla or whatever content manager you prefer. The beauty with Jamstack is that you could still use any content management system (CMS) behind the scene and use React as the UI to pull and push this content to your visitors. One of the main advantages of the stack approach is that you could change your CMS without having to rebuild your UI from scratch.

After lot of searching and experimentations, I've finally opted to use Sanity as my CMS, explained in more details further down in this article, for its brand new powerful and flexible structured content approach using portable text, which, in my humble opinion, is going to get adopted widely in the future.

Next.js

In short, Next.js is a framework to generate modern websites using React. More over, it allows you to run serverless functions which make it very useful to quickly run some backend business logic such as authentication, payments to name only few.

I got a crush for the production part when time has come to publish my work online in just a few clicks with their Vercel platform which offer a generous free offer for hosting your web application.

For sure, I'll be posting more about how to do things the right way with Next.js. Once you understand the way Next.js is doing things behind the scene, you'll do amazing things with few efforts.

Sanity

Sanity.io is a content management system (CMS) that is framework independent. What I mean by that is that I can connect other frontends to my blog content (texts, images, etc.) that no more rely on a specific CMS cause it's saved in JSON format which can be consumed by any API compatible UI framework such as Next.js, Gatsby, Vue.js.

So now, I can switch my frontend framework without having to rebuild my content. Also, I can switch my content to a CDN or any other server that can host and deliver JSON files without having to rebuild my frontend. For exemple, I could move my JSON content on Google Drive.

Sanity.io lets me work with structured content. That means I can add more content types. Who knows, I might add my portfolio, maybe a podcast, some products that I need to market, or my personal music creations.

Also, Sanity comes with a Studio Editor which is fully customizable to make it work the way you want for your specific needs. Again, I'll be posting more about how Sanity and the ways to do things correctly.

Tailwind

I've never been a big fan of css frameworks because of the extra weight added to each page load and the learning curve. The first time I looked at Tailwind I liked the approach which consist of adding classes a bit like Bootstrap. But I didn't liked the learning curve and the extra weight of the version 1 framework.

But I've changed my mind since I looked and tried the version 2, now we're talking about something interesting. Since version 2, only the styles used in the webpage will be loaded. Which means a smaller footprint for the css.

The final word

Who could have said a few years ago that Javascript, which was used to do basic calculations and animations in web pages, would become one of the main language used for building web applications. In my humble opinion, with the growing popularity of React, Javascript is going to become the most popular programming language on the web.

The old static web page composed mainly of html and css, dynamically generated server-side using a monolithic server architecture is dying . Nowadays we're talking about client-side web applications powered worldwide on hundreds of CDN servers. Which make your web applications more reliable, cheaper to host but above all, much more secure.

In my humble opinion, the best approach to use is to create a minimum viable product (MVP) like this blog, using the LEAN method. That is to say that even if it does not contain all the features that I would like to have at the moment, I have integrated the minimum elements such as Google Analytics, Opengraph, metadata and responsive images, to allow me to create content on a scalable platform adapted to current technological requirements.

But above all, the main goal is to create the best web experience as possible for the mobile user which now consume our content using any kind of devices from anywhere.

Over time, I'll be adding new features such as Authentication for accessing exclusive content, newsletter subscription and Internationalization (i18n) which I've learned recently and took me a while to mastered, specially the English/French translations with React routing that is not ready out-of-the-box but mature enough to be put live in production.

Now that I have explored and found the right frameworks, let's build great content to make this blog my own special place on the internet.

Keep coming back, my next goal is to integrate a Newsletter...

See You!