How to setup Sanity CMS with Next.js & TailwindCSS
Sanity CMS has a high potential when used with Next.js & TailwindCSS. In this article, we will deep dive in to the setup.
Go to How to setup Sanity CMS with Next.js & TailwindCSSUpgrading content changes is a mess in sanity. But no more, using the latest sanity migration tool, we can easily migrate data / content / schema easily. Let's start.
First, upgrade sanity
and @sanity/cli
to the latest version.
Run the following code inside your project folder
npm install sanity@latest # or pnpm install sanity@latest
Make sure you upgade, otherwise you would get error like: "migration" is not a sanity command
. This error will happen if you installed sanity globally. You should be upgrading inside the project as well. To confirm run sanity debug
and make sure sanity
package is latest.
Now, let's create new migration by running the following command
sanity migration create
Once you run the command, it will ask you to create a name and choose a default code. Choose any and finish. A new `migrations
` folder will be added to your root folder or inside studio folder.
Now, you can open the file and modify the code. Here's a sample code I have added to upgrade zip code content from string to number.
import { defineMigration, at, set } from "sanity/migrate";
export default defineMigration({
name: "Upgrade zip code string to number",
title: "zip-code",
documentTypes: ["post"],
migrate: {
document(doc, context) {
return [at("zip", set(Number(doc.zip)))];
},
},
});
I'll explain what's going on in the above code.
First, we import the `defineMigration
` from `sanity/migrate
`. Then you can add a human-readable name if you want. This is optional.
title
& documentTypes
will be asked while creating migration from the above command, if you skip that, just add it.
Now, inside migration, we run a loop inside document and we says whenever it matches zip
using at("zip")
and we add an dditional argument to set new value. It could be your logic or result, here I simply used Number()
from javascript to replace the current one using doc.zip
.
Now, that we have the migration setup, let's run the migration using the following code.
First, we will test if our changes are good without actually applying the migration. Sanity by default run in this mode so no files are actually touched.
sanity migration run <migration-name> # eg: sanity migration run zip-code
Once you are satisfied with the results, run the following code to make the changes.
sanity migration run <migration-name> --no-dry-rum # eg: sanity migration run zip-code --no-dry-rum
Done. That's it. The sanity schema content will be migrated now.
Further Reading:
https://www.sanity.io/docs/schema-and-content-migrations
https://www.sanity.io/docs/migration-cheat-sheet
https://www.sanity.io/docs/http-patches
Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
Sanity CMS has a high potential when used with Next.js & TailwindCSS. In this article, we will deep dive in to the setup.
Go to How to setup Sanity CMS with Next.js & TailwindCSS