Recently, I began working on an AI tools website developed using Next.js. While the frontend styling was primarily done by others, I am responsible for the backend implementation. One of my tasks is to figure out how to fetch tool data , how to let user mange content.
My primary requirement for a content management system (CMS) is that it should be free and easy to use. I researched several tools for comparison. For example, in my previous version (Oscar Yiu 1.0) of the project, I used Strapi because it offered free self-hosting on Heroku (three years ago). However, it appears that there are no longer any free hosting options available for Strapi. Another option I considered was Netlify CMS, which I have used before and found to be completely free, although it requires deployment specifically to Netlify (unless I am mistaken). However, since my project is already deployed on Vercel, I explored other alternatives. That’s when I discovered Sanity, which provides the advantage of 10,000 free documents.
While watching various tutorials, I noticed that they all started from an empty project. However, I was specifically looking for a video tutorial that demonstrates how to integrate Sanity into an existing project. Luckily, I found the “30-second install sanity” video, which demonstrated how easy it is to configure and set up a lot of folders and the studio.
After registering an account with Sanity, I followed their three-step process for utilizing it as a CMS:
- Setting up the schema: They have well-documented instructions to guide you through this step.
- Opening the studio to add data: The studio allows you to conveniently authenticate via Google and add data.
- Linking the data to the frontend: In my case, I opted for static site generation, which reduces the bandwidth required for connecting to Sanity. Additionally, the query language, GROQ, is well-documented and easy to use.
Everything seemed great, but I cannot give it a perfect score because it lacks type safety. I found myself hardcoding types for different query results, which is not developer-friendly. However, overall, my experience with Sanity has been quite positive.
During production, I encountered an issue with data fetching that was different from local development. In Next.js, the getStaticProps function executes every time the page is refreshed. However, in production, we wanted the frontend data to change only when the CMS was updated by a user. To achieve this, we needed to use Sanity webhooks to trigger Vercel rebuilds. Surprisingly, setting up the webhook took me only 2 minutes. In the future, I might consider creating a video to share some tips and create a simple app tutorial on using Sanity.
In conclusion, I find Sanity to be a valuable tool for our project, and I am impressed with its ease of use and flexibility.
