Keystatic

KeyStatic is a CMS that stores data in a JSON file or on your Github repository. It's the default CMS implementation in Makerkit.

This implementation is used when the host app's environment variable is set as:

CMS_CLIENT=keystatic

Additionally, the following environment variables may be required:

NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND=local # local, cloud, github KEYSTATIC_PATH_PREFIX=apps/web NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content # apps/web/content

You can also use Keystatic Cloud or GitHub as the storage kind as remote storage.

If KEYSTATIC_STORAGE_KIND is set to cloud, the following environment variables are required:

KEYSTATIC_STORAGE_KIND=cloud KEYSTATIC_STORAGE_PROJECT=project-id

If KEYSTATIC_STORAGE_KIND is set to github, the following environment variables are required:

NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND=github NEXT_PUBLIC_KEYSTATIC_STORAGE_REPO=makerkit/next-supabase-saas-kit-turbo-demo NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content KEYSTATIC_GITHUB_TOKEN=github_********************************************** KEYSTATIC_PATH_PREFIX=apps/web

Of course, you need to replace the NEXT_PUBLIC_KEYSTATIC_STORAGE_REPO and KEYSTATIC_GITHUB_TOKEN with your own values.

GitHub mode requires the installation of a GitHub app for displaying the admin.

Please refer to the Keystatic documentation for more information.

If your content folder is not at content, you can set the NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH environment variable to the correct path. For example, if your content folder is at data/content, you can set the NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH environment variable as:

NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=data/content

Adding the Keystatic admin to your app

To add the Keystatic admin to your app, please run the following command:

turbo gen keystatic

Your app will now have a new route at /keystatic where you can manage your content.

Note: your Github token must have permissions to read to the repository (for read-only).


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS