Vinish Bhaskar

May 12 2024

How to Integrate Sanity with Next.js Template or Boilerplate

Learn how to seamlessly integrate Sanity CMS with your Next.js SaaS Boilerplate. Create a streamlined content workflow.

How to Integrate Sanity with Next.js Template or Boilerplate

Welcome! In this tutorial, we'll guide you on integrating Sanity (a powerful and flexible headless CMS) with your SaaS Boilerplate or Template.

Additionally, we will demonstrate a step-by-step guide for setting up Sanity, Creating content, and even setting up webhooks for real-time content updates.

It allows us to manage the content (e.g., blog posts, product descriptions, etc.) seamlessly, while the SaaS Boilerplate provides a solid foundation for building our SaaS product. For this demonstration, we will use the SaaSBold, a full-stack Next.js SaaS boilerplate.

By the end of this guide, you'll have a basic understanding of how to fetch and display content from Sanity within your SaaS application, even if you're new to these tools.

PS: This tutorial is a part of a our comprehensive guide on "How to Install, Integrate and Deploy SaaS Boilerplate.

Let's get started!

Sanity Integration

To seamlessly integrate Sanity with the SaaS Boilerplate application, you'll need a few essential information:

  • Sanity Project ID: This is the project's unique identifier. You can find it in your Sanity project dashboard on the sanity.io/manage website.
  • Sanity Project Title: This is your Sanity project name.
  • Sanity API Key: This is your authentication token to access the Sanity API from your SaaS Boilerplate app. 
  • Sanity Webhook Secret: This secret code secures webhooks, enabling real-time content updates between Sanity and the SaaS website.

In this section, we'll guide you through obtaining these values. Once you have them, you can fully integrate Sanity with your SaaS Boilerplate application and start creating and managing your blog content effortlessly!

Integrate Sanity with SaaS Boilerplate

Let's start by creating and integrating the Sanity project with the SAAS boilerplate.

Follow these steps to integrate Sanity:

1. Create a Sanity Account: Open your web browser and visit the Sanity website. Create a free account (or log in if you already have one).

2. Initialize a Sanity Project: Open your terminal and run the following command:

npm -y create sanity@latest

Choose a name for your project (e.g., "My SaaS Blog") and click "Create."

This command will create a new Sanity project on the Sanity dashboard and guide you through some initial setup steps. Just follow the prompts on the terminal.

Note: You don't need the local project folder created by this command. It's just for project creation on the Sanity dashboard. You can delete the project folder after the project shows up on sanity.io/manage

3. Get the Project Name and ID: Log in to sanity.io/manage and navigate to the project you just created. You'll see your Project Name and Project ID displayed. Copy these values.

blog image

4. Set Environment Variables: Open the .env file in your SaaS boilerplate project and update the variables' value. ( For SaaSBold, it's as below )

NEXT_PUBLIC_SANITY_PROJECT_ID=YOUR_PROJECT_ID

NEXT_PUBLIC_SANITY_PROJECT_TITLE=YOUR_PROJECT_NAME

5. Enable CORS Origin: Visit http://localhost:3000/studio in your browser. You'll be prompted to add the URL as a CORS. Click "Continue"

This allows our SaaS app to access content from Sanity securely.

blog image

6. Log In to Sanity Studio: Go to http://localhost:3000/studio and log in using the preferred method (e.g., Google, GitHub).


You'll be redirected to the Sanity studio dashboard, where we can add authors, categories and tags and create and manage the blog content.

blog image

Creating and Publishing an Article

Now, let's explore how to create and publish your article using Sanity's dashboard.

1. Create a New Post: Click the "Post" button, then the "Create post" icon.

blog image

2. Write Your Article: Fill in the required fields, such as Title, Metadata (like SEO description), Featured images, Author, and Tags. Use the rich text editor to craft your blog post's content.

blog image

3. Add Image: To add an image to the blog post article, click the "Image" button in the editor and choose "Image." Upload an image from your computer or select from Sanity's built-in image library.

4. Publish: Once your article is ready, click the "Publish" button. Your blog post will now be live on your SaaS website's blog (/blog ) section.

Write your content, add images or other media, and hit publish to share your work.

Sanity API Integration

To seamlessly fetch and display the blog posts on our website, we'll need to give our app a way to communicate with the Sanity project.

So, Let's explore how to integrate Sanity's API to manage your content with any application.

1. Visit sanity.io/manage, go to the "API" tab, then the "Tokens" section.

2. Click "Add API token" and fill out the form:

  • Name: Give your token a descriptive name.
  • Permission: Select "Editor" access Or Choose the access privileges for the token you want.
blog image

3. Click "Save" to generate the token.

blog image

4. Store the API Key: The API key will be generated once you click the "Save" button. Copy the generated API key and add it to your .env file:

blog image
SANITY_API_KEY=YOUR_API_KEY

Sanity Webhook Integration

Sanity's webhook acts as a bridge between your content and external services. Let's explore how to integrate the Sanity webhook to see changes in content in real-time.

1. Create a Webhook: Visit sanity.io/manage, go to "API" -> "Webhooks" and click "Create Webhook.

blog image

2. Fill out the required field with information about the hook.

  • Name: Give your webhook a name.
  • Description: Describe the function of your webhook (This is an optional field).
  • URL: Set the URL to https://YOUR_SITE_URL/api/revalidate
  • Dataset: Choose your desired dataset or leave the default value.
  • Trigger on: Set the hook to trigger "Create", "Update", and "Delete".
  • Filter: Leave this field blank.
  • Projections: Set the projections to {_type, "slug": slug.current}
  • Status: Check the enable webhook box.
  • HTTP Method: POST.
  • HTTP headers: Leave it as the default
  • API version: As default.
  • Drafts: Keep untick or Choose as you desired
  • Secret: Give your webhook a unique secret and copy it

Click on the "save" button once completed to create your webhook.

3. Store the Webhook Secret: Add the secret to your .env file:

SANITY_HOOK_SECRET=YOUR_SECRET

4. Test the Webhook (on Live Site Only): You can't test webhooks locally. Deploy your site, then edit and publish an article in Sanity Studio.


Do a hard refresh of your website. You will be able to see the content updates in real-time!

Conclusion

Congratulations! You've successfully integrated Sanity into your SaaS website. By following this guide, you've unlocked the power to manage your content effortlessly, create engaging blog posts, and keep your website up-to-date with real-time content updates.

Related Blog Posts

Maecenas et nunc tellus wed eu elit odio quisque sed libero finibus, posuere metus vel

blog-image
Vinish Bhaskar

May 14 2024

How to integrate Cloudflare R2 Bucket with Boilerplate and Template

Learn how to seamlessly integrate Cloudflare R2 Bucket with your SaaS Boilerplate for secure and scalable file storage.

blog-image
Vinish Bhaskar

Jun 01 2024

How to integrate Algolia with SaaS Boilerplate and Template

Learn how to seamlessly integrate Algolia search into your SaaS boilerplate for improved search relevancy and performance.

blog-image
Vinish Bhaskar

May 13 2024

How to get PostgreSQL Database URL & Integrate with Boilerplate

Learn how to quickly get PostgreSQL database URL from Supabase and integrate it seamlessly with your Next.js SaaS Boilerplate in minutes.

blog-image
Vinish Bhaskar

May 17 2024

How to Integrate Email API into Next.js Boilerplate or Template

Learn how to seamlessly integrate email functionality into your SaaS boilerplate/template using Resend SMTP's powerful API. Effortlessly send transactional Emails.

blog-image
Vinish Bhaskar

Jun 12 2024

How to Quickly Deploy SaaS Boilerplate and Template on Vercel

Speed up your SaaS launch! Learn how to deploy your SaaS Boilerplate on Vercel quickly and effortlessly with this step-by-step guide.

blog-image
Vinish Bhaskar

May 13 2024

How to integrate Mailchimp with Boilerplate or Templates

Learn how to seamlessly integrate Mailchimp into Next.js Boilerplate/Template, enabling you to create, send, and track effective email marketing campaigns.

blog-image
Vinish Bhaskar

May 15 2024

How to Integrate NextAuth.js with Next.js Boilerplate and Template

Simplify authentication in your templates and SaaS Boilerplate! Learn how to effortlessly integrate NextAuth with Google and GitHub login, including passwordless magic links.