Using Supabase as a CMS Provider in the Next.js Supabase SaaS Starter Kit

You can store content in Supabase and connect Supamode as a CMS to create a CMS in the Next.js Supabase SaaS Starter Kit.

This guide helps you store content in Supabase and Connect Supamode as a CMS. Supamode is fully optional, and you can use any other CMS provider that connects with Postgres.

1. Installing the Supabase Plugin

Install the Supabase plugin from your main app:

npx @makerkit/cli plugins install

Choose Supabase CMS when prompted.

Now, install the plugin package in the CMS package:

pnpm --filter "@kit/cms" add "@kit/supabase-cms@workspace:*"

2. Registering the Plugin

Add supabase as a supported CMS client in packages/cms/types/src/cms.type.ts:

export type CmsType = 'wordpress' | 'keystatic' | 'supabase';

Add the following code to your packages/cms/core/src/create-cms-client.ts file:

// Register the Supabase CMS client implementation
cmsRegistry.register('supabase', async () => {
  const { createSupabaseCmsClient } = await import('@kit/supabase-cms');
  return createSupabaseCmsClient();
});

Now, add the following code to the packages/cms/core/src/content-renderer.tsx file:

cmsContentRendererRegistry.register('supabase', async () => {
  return function SupabaseContentRenderer({ content }: { content: unknown }) {
    return content as React.ReactNode;
  };
});

3. Applying the Migration

Create a new migration to apply the changes to the database schema:

pnpm --filter web supabase migrations new cms

Now, copy the content of the packages/plugins/supabase-cms/migration.sql file to the newly created migration file.

Now, apply the migration to the database:

pnpm run supabase:web:migration up

And finally, generate the TypeScript types for the Supabase CMS:

pnpm --filter web supabase:web:typegen

4. Setting Supabase as the CMS Provider

You can now switch to the Supabase CMS by setting the CMS_CLIENT environment variable to supabase in the .env file:

CMS_CLIENT=supabase

That's it! You can now use Supabase as a CMS provider in the Next.js Supabase SaaS Starter Kit! Yay!

5. Using Supamode as CMS

Supamode is a powerful CMS for Supabase that allows you to manage your content in a CMS-like interface.

This is fully optional, and you can use any other CMS provider that connects with Postgres. However, as the creators of Supamode, we highly recommend it!

To use Supamode as a CMS, you need to install it into your Supabase project. You can install it by following the installation guide.

1. Syncing the Supabase tables to Supamode

To use Supamode as a CMS, you need to sync the tables to the Supamode project. You can sync the tables by running the following queries:

-- Sync content_items table
select supamode.sync_managed_tables('public', 'content_items');
-- Sync categories table
select supamode.sync_managed_tables('public', 'categories');
-- Sync tags table
select supamode.sync_managed_tables('public', 'tags');

From here on, you want to configure the Supamode CMS tables to your liking. You can configure the tables by going to the Resources section in the Supamode UI and clicking on the table you want to configure.