Makerkit Next Supabase Turbo

https://makerkit.dev/docs/next-supabase-turbo
Admin
Makerkit is a React SaaS boilerplate for Next.js and Supabase, enabling rapid development of SaaS...
Tokens:590,210
Snippets:5,001
Trust Score:8.6
Update:1 day ago
Show doc for...
Tokens:
Raw
### Quick start with Keystatic: createCmsClient and getContentItems

Source: https://makerkit.dev/docs/next-supabase-turbo/content

Shows the default CMS client usage with Keystatic. No setup is required for local development. The example fetches up to 10 posts and renders their titles and excerpts.

```typescript
import { createCmsClient } from '@kit/cms';
async function BlogPage() {
  const cms = await createCmsClient();
  const posts = await cms.getContentItems({
    collection: 'posts',
    limit: 10,
  });
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}
```

--------------------------------

### Install the Roadmap plugin with the CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/roadmap-plugin

Run this command to start the plugin installation wizard. You will need to select both the 'kanban' and 'roadmap' plugins because the roadmap plugin depends on the kanban plugin.

```bash
npx @makerkit/cli plugins add
```

--------------------------------

### Lemon Squeezy product configuration with setup fee and metered usage

Source: https://makerkit.dev/docs/next-supabase-turbo/billing/lemon-squeezy

Example product configuration for metered billing with a flat setup fee and usage-based tiers. The setup fee is charged once when the subscription is created.

```json
{
  id: 'api-monthly',
  name: 'API Monthly',
  paymentType: 'recurring',
  interval: 'month',
  lineItems: [
    {
      id: '123456',
      name: 'API Access',
      cost: 0,
      type: 'metered',
      unit: 'requests',
      setupFee: 10,  // $10 base fee
      tiers: [
        { upTo: 1000, cost: 0 },
        { upTo: 'unlimited', cost: 0.001 },
      ],
    },
  ],
}
```

--------------------------------

### Add and run setup tasks with addSetup() and setup()

Source: https://makerkit.dev/docs/next-supabase-turbo/api/registry-api

Registers two setup tasks under the 'initialize' group and runs them with setup(). The second call to setup() is a no-op because the tasks are idempotent.

```javascript
// Add setup tasks
emailRegistry.addSetup('initialize', async () => {
  console.log('Initializing email service...');
  // Verify API keys, warm up connections, etc.
});
emailRegistry.addSetup('initialize', async () => {
  console.log('Loading email templates...');
});
// Run all setup tasks (idempotent)
await emailRegistry.setup('initialize');
await emailRegistry.setup('initialize'); // No-op, already ran
```

--------------------------------

### Install a plugin with the Makerkit CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/installing-plugins

Run this command to start the interactive plugin installation. It will prompt you to select a plugin, then install it in your project.

```bash
npx @makerkit/cli@latest plugins add
```

--------------------------------

### Install Node.js and pnpm on VPS

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Installs nvm, loads it, installs the latest LTS Node.js, and installs pnpm globally.

```bash
# Install nvm (check https://github.com/nvm-sh/nvm for latest version)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# Load nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
# Install Node.js (LTS version)
nvm install --lts
# Install pnpm
npm install -g pnpm
```

--------------------------------

### Supabase CLI Examples

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/common-commands

Examples of linking to a remote project, pushing migrations to production, and pulling the remote schema.

```bash
# Link to remote project
pnpm --filter web supabase link --project-ref your-project-ref
# Push migrations to production
pnpm --filter web supabase db push
# Pull remote schema
pnpm --filter web supabase db pull
```

--------------------------------

### Install Dependencies for Email Starter

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/authentication-emails

Command to change into the email starter directory and install npm dependencies.

```bash
cd makerkit-emails-starter && npm install
```

--------------------------------

### Clone and start SigNoz with Docker

Source: https://makerkit.dev/docs/next-supabase-turbo/monitoring/signoz

Clones the SigNoz repository and starts the Docker Compose setup for local development. After running, SigNoz is available at http://localhost:3301.

```bash
# Clone SigNoz
git clone -b main https://github.com/SigNoz/signoz.git && cd signoz/deploy/
# Start SigNoz
docker compose -f docker/clickhouse-setup/docker-compose.yaml up -d
```

--------------------------------

### Start email preview server

Source: https://makerkit.dev/docs/next-supabase-turbo/translations/email-translations

Command to start the email preview server for testing translations in development.

```bash
# Start the email preview server
cd packages/email-templates
pnpm dev
```

--------------------------------

### Start WordPress with pnpm filter

Source: https://makerkit.dev/docs/next-supabase-turbo/content/wordpress

Run from the root to start WordPress using the @kit/wordpress package.

```bash
pnpm --filter @kit/wordpress run start
```

--------------------------------

### Complete Test Example

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-tests

A full pgTAP test demonstrating setup, role switching, and RLS verification. It creates a team, adds a member, and tests that the member can see the team while a stranger cannot, and verifies the team exists using the postgres role.

```sql
begin;
create extension "basejump-supabase_test_helpers" version '0.0.6';
select no_plan();
-- Setup test users
select makerkit.set_identifier('owner', 'owner@example.com');
select makerkit.set_identifier('member', 'member@example.com');
select makerkit.set_identifier('stranger', 'stranger@example.com');
-- Create team (as owner)
select makerkit.authenticate_as('owner');
select public.create_team_account('TestTeam');
-- Add member using postgres role (bypasses RLS)
set local role postgres;
insert into accounts_memberships (account_id, user_id, account_role)
values (
  (select id from accounts where slug = 'testteam'),
  tests.get_supabase_uid('member'),
  'member'
);
-- Test member access (RLS enforced)
select makerkit.authenticate_as('member');
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Member can see their team'
);
-- Test stranger cannot see team (RLS enforced)
select makerkit.authenticate_as('stranger');
select is_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Stranger cannot see team due to RLS'
);
-- Verify team actually exists (bypass RLS)
set local role postgres;
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Team exists in database (confirms RLS is working, not missing data)'
);
select * from finish();
rollback;
```

--------------------------------

### Start development server

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-webhooks

Starts the Next.js development server on a known port (default 3000) so local Supabase webhooks can reach it.

```bash
pnpm run dev
```

--------------------------------

### Install Nginx

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Installs Nginx as a reverse proxy using apt.

```bash
apt install -y nginx
```

--------------------------------

### Install Mixpanel SDK

Source: https://makerkit.dev/docs/next-supabase-turbo/analytics/custom-analytics-provider

Install the mixpanel-browser package in the @kit/analytics workspace using pnpm.

```bash
pnpm add mixpanel-browser --filter "@kit/analytics"
```

--------------------------------

### Install @kit/otp with pnpm

Source: https://makerkit.dev/docs/next-supabase-turbo/api/otp-api

Install the OTP package manually if not using Makerkit. Use `pnpm add @kit/otp`.

```bash
pnpm add @kit/otp
```

--------------------------------

### Example packages/supabase/AGENTS.md Content

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/ai-agents

Example content for a package-specific AGENTS.md file, showing how to document client usage with server and admin clients.

```markdown
# packages/supabase/AGENTS.md
## Client Usage
### Server Components (Preferred)
import { getSupabaseServerClient } from '@kit/supabase/server-client';
const client = getSupabaseServerClient();
// RLS automatically enforced
### Admin Client (Use Sparingly)
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
// CRITICAL: Bypasses RLS - validate manually!
```

--------------------------------

### Start Next.js development server

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/running-project

Run `pnpm dev` to start the web application at localhost:3000 and dev tools at localhost:3010.

```bash
pnpm dev
```

--------------------------------

### Start WordPress with Docker Compose

Source: https://makerkit.dev/docs/next-supabase-turbo/content/wordpress

Run from the packages/cms/wordpress/ directory to start WordPress locally at http://localhost:8080.

```bash
docker-compose up
```

--------------------------------

### Install waitlist plugin via CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/waitlist-plugin

Run this command in your terminal to install the waitlist plugin. The CLI installs the plugin at packages/plugins/waitlist and automatically adds the @kit/waitlist dependency, replaces the sign-up form, adds translations, and creates a Supabase migration file.

```bash
npx @makerkit/cli@latest plugins add waitlist
```

--------------------------------

### Example Implementation: MyCmsClient

Source: https://makerkit.dev/docs/next-supabase-turbo/content/creating-your-own-cms-client

A complete example of a custom CMS client for a fictional HTTP API, demonstrating how to implement the CmsClient interface.

```APIDOC
## MyCmsClient

### Description
Example implementation of a CMS client for a fictional HTTP API, extending the CmsClient base class.

### Methods

#### getContentItems(options: Cms.GetContentItemsOptions): Promise<{ total: number; items: Cms.ContentItem[] }>

##### Description
Fetches content items based on the provided options.

##### Parameters
- **options** (Cms.GetContentItemsOptions) - Required - Options for filtering and sorting content items.

##### Request Example
```
GET /content?collection=blog&limit=10&offset=0&status=published&sort_by=publishedAt&sort_direction=desc&categories=tech&tags=javascript&language=en
```

##### Response Example
```json
{
  "total": 1,
  "items": [
    {
      "id": "1",
      "title": "Example",
      "label": "Example Label",
      "url": "https://example.com",
      "description": "Example description",
      "content": {},
      "publishedAt": "2023-01-01T00:00:00Z",
      "image": "https://example.com/image.png",
      "status": "published",
      "slug": "example",
      "categories": [],
      "tags": [],
      "order": 0,
      "children": [],
      "parentId": null
    }
  ]
}
```

#### getContentItemBySlug(params: { slug: string; collection: string; status?: Cms.ContentItemStatus }): Promise<Cms.ContentItem | undefined>

##### Description
Fetches a single content item by its slug.

##### Parameters
- **params** (object) - Required
  - **slug** (string) - Required - The slug of the content item.
  - **collection** (string) - Required - The collection name.
  - **status** (Cms.ContentItemStatus) - Optional - Filter by status.

##### Request Example
```
GET /content/example?collection=blog&status=published
```

##### Response Example
```json
{
  "id": "1",
  "title": "Example",
  "label": "Example Label",
  "url": "https://example.com",
  "description": "Example description",
  "content": {},
  "publishedAt": "2023-01-01T00:00:00Z",
  "image": "https://example.com/image.png",
  "status": "published",
  "slug": "example",
  "categories": [],
  "tags": [],
  "order": 0,
  "children": [],
  "parentId": null
}
```

#### getCategories(options?: Cms.GetCategoriesOptions): Promise<Cms.Category[]>

##### Description
Fetches categories based on optional filters.

##### Parameters
- **options** (Cms.GetCategoriesOptions) - Optional - Options for filtering categories.

##### Request Example
```
GET /categories?limit=10&offset=0&slugs=tech,news
```

##### Response Example
```json
[
  {
    "id": "1",
    "name": "Tech",
    "slug": "tech"
  }
]
```

#### getCategoryBySlug(slug: string): Promise<Cms.Category | undefined>

##### Description
Fetches a single category by its slug.

##### Parameters
- **slug** (string) - Required - The slug of the category.

##### Request Example
```
GET /categories/tech
```

##### Response Example
```json
{
  "id": "1",
  "name": "Tech",
  "slug": "tech"
}
```

#### getTags(options?: Cms.GetTagsOptions): Promise<Cms.Tag[]>

##### Description
Fetches tags based on optional filters.

##### Parameters
- **options** (Cms.GetTagsOptions) - Optional - Options for filtering tags.

##### Request Example
```
GET /tags?limit=10&offset=0&slugs=javascript,typescript
```

##### Response Example
```json
[
  {
    "id": "1",
    "name": "JavaScript",
    "slug": "javascript"
  }
]
```
```

--------------------------------

### Install Docker on Ubuntu

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Add Docker's official GPG key, set up the repository, and install Docker Engine, CLI, containerd, and the Compose plugin.

```bash
# Add Docker's official GPG key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
# Set up repository
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null
# Install Docker
apt update
apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
```

--------------------------------

### Install Stripe CLI globally and listen

Source: https://makerkit.dev/docs/next-supabase-turbo/billing/stripe

Installs the Stripe CLI via Homebrew on macOS, logs in, and starts listening for webhooks.

```bash
# macOS
brew install stripe/stripe-cli/stripe
# Login
stripe login
# Listen for webhooks
stripe listen --forward-to localhost:3000/api/billing/webhook
```

--------------------------------

### Create .env.local for new app

Source: https://makerkit.dev/docs/next-supabase-turbo/development/adding-turborepo-app

Example environment variables for the new application, setting the site URL and app name.

```bash
NEXT_PUBLIC_SITE_URL=http://localhost:3001
NEXT_PUBLIC_APP_NAME="PDF Chat"
# ... other environment variables
```

--------------------------------

### SSH into Server

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Connect to your VPS via SSH as root to begin the initial server setup.

```bash
ssh root@your-server-ip
```

--------------------------------

### Pluralization Usage Examples

Source: https://makerkit.dev/docs/next-supabase-turbo/translations/using-translations

Call the t function with a count value to get the correct pluralized string. The examples show output for count 1 and count 5.

```javascript
t('common.itemCount', { count: 1 }); // "1 item"
t('common.itemCount', { count: 5 }); // "5 items"
```

--------------------------------

### Start Supabase

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/running-project

Starts the Supabase local development environment. This command initializes PostgreSQL, Supabase Studio, Mailpit, and other services. First startup downloads Docker images and runs migrations, which can take a few minutes.

```bash
pnpm run supabase:web:start
```

--------------------------------

### AGENTS.md Patterns Example

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/ai-agents

Example of a 'Patterns' section in AGENTS.md showing correct and incorrect usage of authActionClient. Use this to guide agents toward the correct pattern and avoid raw server actions.

```markdown
## Patterns
### CORRECT - Use authActionClient
export const action = authActionClient.inputSchema(schema).action(async ({ parsedInput: data, ctx: { user } }) => {});
### INCORRECT - Raw Server Action
export async function action(data: FormData) {} // Missing validation
```

--------------------------------

### Type-Safe Handlers

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-webhooks

Example of casting the `change` object to a specific table type to get type-safe access to the record fields.

```APIDOC
## Type-Safe Handlers

### Description
Cast the `change` object to a specific table type to get type-safe access to the record fields.

### Code Example
```typescript
import type { RecordChange } from '@kit/database-webhooks';
type ProjectChange = RecordChange<'projects'>;
type SubscriptionChange = RecordChange<'subscriptions'>;
async function handleEvent(change: RecordChange<keyof Tables>) {
  if (change.table === 'projects') {
    const projectChange = change as ProjectChange;
    // projectChange.record is now typed to the projects table
    console.log(projectChange.record.name);
  }
}
```

```

--------------------------------

### Enable Nginx Site and Restart

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Creates a symlink to enable the site, removes the default site, tests the configuration, and restarts Nginx.

```bash
# Create symlink
ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
# Remove default site
rm /etc/nginx/sites-enabled/default
# Test configuration
nginx -t
# Restart Nginx
systemctl restart nginx
```

--------------------------------

### Stripe CLI webhook secret output

Source: https://makerkit.dev/docs/next-supabase-turbo/billing/stripe

Example output from the Stripe CLI when it starts listening, showing the webhook signing secret.

```bash
> Ready! Your webhook signing secret is whsec_xxxxxxxxxxxxx
```

--------------------------------

### Update package.json for new app

Source: https://makerkit.dev/docs/next-supabase-turbo/development/adding-turborepo-app

Example package.json for the new application, setting the name to pdf-chat and using port 3001 for dev and start scripts.

```json
{
  "name": "pdf-chat",
  "version": "0.0.1",
  "scripts": {
    "dev": "next dev --port 3001",
    "build": "next build",
    "start": "next start --port 3001"
  }
}
```

--------------------------------

### Configure Winston with OpenTelemetry

Source: https://makerkit.dev/docs/next-supabase-turbo/monitoring/signoz

Example Winston configuration with JSON format and console transport. Add OpenTelemetry transport for SigNoz as per the integration guide.

```typescript
import winston from 'winston';
const { combine, timestamp, json } = winston.format;
export const Logger = winston.createLogger({
  level: process.env.LOG_LEVEL || 'info',
  format: combine(
    timestamp(),
    json()
  ),
  transports: [
    new winston.transports.Console(),
    // Add OpenTelemetry transport for SigNoz
  ],
});
```

--------------------------------

### Basic .env setup

Source: https://makerkit.dev/docs/next-supabase-turbo/configuration/application-configuration

Add these environment variables to your .env file. Required variables include NEXT_PUBLIC_SITE_URL, NEXT_PUBLIC_PRODUCT_NAME, NEXT_PUBLIC_SITE_TITLE, NEXT_PUBLIC_SITE_DESCRIPTION, NEXT_PUBLIC_THEME_COLOR, and NEXT_PUBLIC_THEME_COLOR_DARK. Optional variables include NEXT_PUBLIC_DEFAULT_LOCALE (default 'en') and NEXT_PUBLIC_DEFAULT_THEME_MODE (default 'light').

```plaintext
NEXT_PUBLIC_SITE_URL=https://myapp.com
NEXT_PUBLIC_PRODUCT_NAME="My SaaS App"
NEXT_PUBLIC_SITE_TITLE="My SaaS App - Build Faster"
NEXT_PUBLIC_SITE_DESCRIPTION="The easiest way to build your SaaS application"
NEXT_PUBLIC_DEFAULT_LOCALE=en
NEXT_PUBLIC_DEFAULT_THEME_MODE=light
NEXT_PUBLIC_THEME_COLOR="#ffffff"
NEXT_PUBLIC_THEME_COLOR_DARK="#0a0a0a"
```

--------------------------------

### Troubleshooting: add workspace dependencies to package.json

Source: https://makerkit.dev/docs/next-supabase-turbo/development/adding-turborepo-app

Example package.json dependencies block showing the required workspace packages @kit/ui and @kit/supabase. After adding, run pnpm install from the repository root.

```json
{
  "dependencies": {
    "@kit/ui": "workspace:*",
    "@kit/supabase": "workspace:*"
  }
}
```

--------------------------------

### Server Actions with getTranslations

Source: https://makerkit.dev/docs/next-supabase-turbo/translations/using-translations

For Server Actions, import getTranslations from next-intl/server and use it to get a translation function. This example shows a server action that returns an error message using a translation key.

```javascript
'use server';
import { getTranslations } from 'next-intl/server';
export async function myServerAction() {
  const t = await getTranslations('common');
  // Use translations
  const message = t('genericServerError');
  return { error: message };
}
```

--------------------------------

### useSupabase hook usage with React Query

Source: https://makerkit.dev/docs/next-supabase-turbo/api/authentication-api

Example of using the useSupabase hook to get the Supabase client and fetch tasks with React Query. It queries the 'tasks' table ordered by created_at descending.

```tsx
'use client';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
import { useQuery } from '@tanstack/react-query';
function TaskList() {
  const supabase = useSupabase();
  const { data: tasks } = useQuery({
    queryKey: ['tasks'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('tasks')
        .select('*')
        .order('created_at', { ascending: false });
      if (error) throw error;
      return data;
    },
  });
  return (
    <ul>
      {tasks?.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}
```

--------------------------------

### AGENTS.md Quick Reference Example

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/ai-agents

Example of a 'Quick Reference' section in AGENTS.md that lists key paths for app routes, shared components, database schemas, and feature packages.

```markdown
## Quick Reference
- App routes: `apps/web/app/`
- Shared components: `packages/ui/src/`
- Database schemas: `apps/web/supabase/schemas/`
- Feature packages: `packages/features/*/`
```

--------------------------------

### Use setup groups to control initialization timing

Source: https://makerkit.dev/docs/next-supabase-turbo/api/registry-api

Registers setup tasks in different groups ('verify-credentials' and 'warm-cache') and runs them at different times: at startup and before the first email.

```javascript
emailRegistry.addSetup('verify-credentials', async () => {
  // Quick check at startup
});
emailRegistry.addSetup('warm-cache', async () => {
  // Expensive operation, run later
});
// At startup
await emailRegistry.setup('verify-credentials');
// Before first email
await emailRegistry.setup('warm-cache');
```

--------------------------------

### Install Honeybadger plugin with Makerkit CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/monitoring/honeybadger

Run this command to add the Honeybadger plugin to your project. The Makerkit CLI automatically wires up the plugin, so no manual setup is needed. Review the changes with git diff.

```bash
npx @makerkit/cli@latest plugins add honeybadger
```

--------------------------------

### Development environment configuration (.env.development)

Source: https://makerkit.dev/docs/next-supabase-turbo/configuration/application-configuration

Example environment file for local development, setting the site URL to localhost.

```plaintext
# .env.development
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

--------------------------------

### Send Team Invitation Email using renderInviteEmail

Source: https://makerkit.dev/docs/next-supabase-turbo/emails/email-templates

Example of using the built-in renderInviteEmail template to send an email. It imports getMailer and renderInviteEmail, renders the email to get html and subject, then sends it via the mailer. The link and invitedUserEmail are required; teamLogo and language are optional.

```typescript
import { getMailer } from '@kit/mailers';
import { renderInviteEmail } from '@kit/email-templates';
async function sendInvitation() {
  const { html, subject } = await renderInviteEmail({
    teamName: 'Acme Corp',
    teamLogo: 'https://example.com/logo.png', // optional
    inviter: 'John Doe', // can be undefined if inviter is unknown
    invitedUserEmail: 'jane@example.com',
    link: 'https://app.example.com/invite/abc123',
    productName: 'Your App',
    language: 'en', // optional, defaults to NEXT_PUBLIC_DEFAULT_LOCALE
  });
  const mailer = await getMailer();
  await mailer.sendEmail({
    to: 'jane@example.com',
    from: process.env.EMAIL_SENDER!,
    subject,
    html,
  });
}
```

--------------------------------

### Install dependencies with pnpm

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/clone-repository

Installs all workspace dependencies across the monorepo. The first install takes a few minutes.

```bash
pnpm i
```

--------------------------------

### Setup fee with metered usage in Lemon Squeezy

Source: https://makerkit.dev/docs/next-supabase-turbo/billing/metered-usage

Configure a metered price with a one-time setup fee. The setupFee is charged on subscription creation. Tiers define usage costs.

```javascript
{
  id: '123456',
  name: 'API Access',
  cost: 0,
  type: 'metered',
  unit: 'requests',
  setupFee: 49,  // One-time charge on subscription creation
  tiers: [
    { upTo: 1000, cost: 0 },
    { upTo: 'unlimited', cost: 0.001 },
  ],
}
```

--------------------------------

### Example RLS test using pgTap

Source: https://makerkit.dev/docs/next-supabase-turbo/security/row-level-security

This test script demonstrates how to use pgTap to test RLS policies. It creates two test users, authenticates as the first user, inserts a document, verifies the user can read their own document, then authenticates as the second user and verifies the document is not visible. Requires the `supabase test db` command and a test database setup.

```sql
-- authenticate with a user
select tests.create_supabase_user('testuser', 'testuser@test.com');
select tests.create_supabase_user('testuser2', 'testuser2@test.com');
-- authenticate as the first user
select tests.authenticate_as('testuser');
-- create a document
insert into public.documents (user_id, title, content)
values (tests.get_supabase_uid('testuser'), 'Test Document', 'This is a test document');
-- test the user can read their own document
select row_eq(
    $$ SELECT * from public.documents $$,
    row(tests.get_supabase_uid('testuser'), 'Test Document', 'This is a test document'),
    'User should be able to read their own document'
);
-- alternatively, check the list is not empty
select not_empty(
    $$ SELECT * from public.documents $$,
    'User should be able to read their own document'
);
-- authenticate with another user
select tests.authenticate_as('testuser2');
-- test that the document is not visible to the other user
select is_empty(
    $$ SELECT * from public.documents $$,
    'No documents should be visible to unauthenticated users'
);
```

--------------------------------

### Create Translation File (welcome-email.json)

Source: https://makerkit.dev/docs/next-supabase-turbo/emails/email-templates

JSON translation file for the welcome email template. Contains keys for subject, previewText, heading, hello, mainText, and ctaButton with placeholders like {productName} and {userName}.

```json
{
  "subject": "Welcome to {productName}",
  "previewText": "Welcome to {productName} - Let's get started",
  "heading": "Welcome to {productName}",
  "hello": "Hi {userName},",
  "mainText": "Thanks for signing up! We're excited to have you on board. Click the button below to access your dashboard and get started.",
  "ctaButton": "Go to Dashboard"
}
```

--------------------------------

### Start and Stop Local Supabase

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/common-commands

Commands to start and stop the local Supabase instance. Requires Docker running for the start command.

```bash
# Start Supabase (requires Docker running)
pnpm run supabase:web:start
# Stop Supabase
pnpm run supabase:web:stop
```

--------------------------------

### Radio Group component usage example

Source: https://makerkit.dev/docs/next-supabase-turbo/components/shadcn

Example of using the RadioGroup and RadioGroupItem components with labels. The RadioGroup has a defaultValue of 'comfortable'. This example is shown in a dark theme.

```tsx
import { Label } from '@kit/ui/label';
import { RadioGroup, RadioGroupItem } from '@kit/ui/radio-group';
export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  );
}
```
Tokens:
Raw