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 Copy

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.

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 Copy

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.

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.

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.

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.

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.

3. Click "Save" to generate the token.

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:

SANITY_API_KEY=YOUR_API_KEY Copy

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.

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 Copy

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.