New personal website using Next.js + Keystatic

[grikomsn]

Hey there, Keystatic! 👋🏻

I have been doing some CMS framework hopping for countless times¹ and I decided to use Keystatic for my latest iteration of my personal website at https://nibras.co. Tech stack is the usual Next.js, TypeScript, Tailwind CSS, some various libs, and (obviously) Keystatic.

Initially I wanted to use Next.js with the regular pages router (here lies old man yells at cloud moment), but when I was in the middle of building the articles page I realized that the Reader API suits better if using the app router instead. Even the Keystatic docs recommends Next.js with the app router patterns rather than pages. If I ended up using pages router, getting the articles requires me to use getStaticProps then passing props and types and such. With the app router, it is just an await getArticles() away and map the array as needed. 10 points for DX.

Another thing I like is Keystatic's WYSISYG content editor and DocumentRenderer where I don't need to think much about (de)serializing contents for rendering on pages, and bonus points for allowing custom renderers so I can customize what and how components are shown. One great example is me overriding the block code component with my own server component using shikiji. Would be great if the custom renderer types allow async/server components, but this should suffice.

And on top of that, with Keystatic's local mode and GitHub mode, I can author my content easily with the same interface and experience for both offline and online. This is the main reason why I picked Keystatic for my CMS since I am not fully vendor locked cause my content lives in the repository and not somewhere in the cloud². Not that I want to framework hop again but it definitely feels good to know I don't need to do another serialize/de-serialize excersize when I migrate to another provider. Again, not that I need to.

All in all, Keystatic's dope and looking forward to use it for other projects. The source code is available publicly under the MIT license at https://github.com/grikomsn/improved-happiness.

This submission is also available as an article on my website: https://nibras.co/articles/keystatic-the-last-framework-hop

Footnotes

1. Contentful, DatoCMS, Sanity, Notion, Contentlayer, even custom made ones ↩

2. Technically it's still in the cloud, but you know what I mean. Also, Keystatic offers a cloud version which I might try out. ↩

[simonswiss]

Great article and great looking (and performing) site, @grikomsn ✨🎉