MkSaaS

https://mksaas.com/docs
Admin
MkSaaS is a complete Next.js boilerplate designed to accelerate the development of AI SaaS websites,...
Tokens:46,593
Snippets:670
Trust Score:7.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Multi-language Documentation Example (Chinese)

Source: https://mksaas.com/docs/docs

The Chinese version of the 'Getting Started' documentation page. The filename includes the locale code `.zh.mdx`, and the frontmatter is translated.

```markdown
---
title: 入门文档
description: MkSaaS项目的快速设置文档
icon: Rocket
---

Content in Chinese...
```

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

### Copy Environment Example Files

Source: https://mksaas.com/docs/deployment/cloudflare-d1

Copy the example environment files to create your local development configuration.

```bash
cp env.example .env
cp dev.vars.example .dev.vars
```

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

### Install Project Dependencies

Source: https://mksaas.com/docs/start

Install all necessary project dependencies using pnpm.

```bash
pnpm install
```

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

### Copy Example Environment File

Source: https://mksaas.com/docs/env

Copy the example environment file to your project's root directory. Ensure this file is not committed to version control.

```bash
cp env.example .env
```

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

### English Blog Post Example

Source: https://mksaas.com/docs/blog

Example of an English blog post with standard frontmatter.

```mdx
---
title: Welcome to our Blog
description: Our first official blog post
image: https://cdn.mksaas.com/mksaas/images/blog/welcome.jpg
date: "2023-12-01"
published: true
categories: ["announcement"]
author: "mksaas"
---

Content in English...
```

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

### Start Development Server

Source: https://mksaas.com/docs/start

Run the local development server for MkSaaS.

```bash
pnpm run dev
```

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

### Add New Component Example

Source: https://mksaas.com/docs/components

Example of creating a new custom component, including necessary imports and component structure. Place components in the appropriate business module directory.

```typescript
// src/components/dashboard/AnalyticsChart.tsx
import { Card } from "@/components/ui/card"
import { Chart } from "@/components/ui/chart"

export function AnalyticsChart() {
  return (
    <Card>
      <Chart data={...} />
    </Card>
  )
}
```

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

### Initialize Drizzle Database

Source: https://mksaas.com/docs/database

Run these commands to generate the Drizzle client and migrate the database. Ensure pnpm is installed.

```bash
pnpm run db:generate # Generate the Drizzle client
```

```bash
pnpm run db:migrate # Migrate the database
```

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

### Install Dependencies and Wrangler CLI

Source: https://mksaas.com/docs/deployment/cloudflare

Install project dependencies using pnpm and globally install the Wrangler CLI for Cloudflare deployment.

```bash
pnpm install
```

```bash
pnpm install -g wrangler

# Login to your Cloudflare account
wrangler login
```

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

### Install Dependencies and Wrangler CLI

Source: https://mksaas.com/docs/deployment/cloudflare-d1

Install project dependencies using pnpm and globally install the Wrangler CLI for Cloudflare deployment. Log in to your Cloudflare account using `wrangler login`.

```bash
pnpm install

pnpm install -g wrangler

# Login to your Cloudflare account
wrangler login
```

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

### Install Stripe CLI for Local Development

Source: https://mksaas.com/docs/payment/stripe

Install the Stripe CLI globally to manage Stripe resources and forward events to your local development server.

```bash
pnpm install -g @stripe/stripe-cli
```

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

### Start Development Server with Hostc

Source: https://mksaas.com/docs/payment/creem

Use Hostc to expose your local server to the internet for receiving Creem webhook events during development. Run this command in your terminal.

```bash
npx hostc
```

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

### Multi-language Documentation Example (English)

Source: https://mksaas.com/docs/docs

An example of a documentation page in English. The frontmatter properties like title and description are in English.

```markdown
---
title: Getting Started
description: Quick start guide for setting up your MkSaaS project
icon: Rocket
---

Content in English...
```

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

### Chinese Blog Post Example

Source: https://mksaas.com/docs/blog

Example of a Chinese blog post, demonstrating multi-language support using the `.[locale].mdx` naming convention.

```mdx
---
title: 欢迎来到我们的博客
description: 我们的第一篇官方博客文章
image: https://cdn.mksaas.com/mksaas/images/blog/welcome.jpg
date: "2023-12-01"
published: true
categories: ["announcement"]
author: "mksaas"
---

Content in Chinese...
```

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

### Local Installation PostgreSQL Connection String

Source: https://mksaas.com/docs/database

Use this connection string for a locally installed PostgreSQL database. Replace placeholders with your actual username, password, and database name.

```bash
DATABASE_URL="postgres://your-username:your-password@localhost:5432/database-name"
```

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

### Install and Check pnpm Version

Source: https://mksaas.com/docs/start

Install the pnpm package manager globally and check its version.

```bash
npm install -g pnpm

pnpm --version
```

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

### Create a New Documentation Page (MDX)

Source: https://mksaas.com/docs/docs

Example of an MDX file for a new documentation page. The frontmatter includes title, description, and an icon property that supports Lucide icons.

```markdown
---
title: Getting Started
description: Quick start guide for setting up your MkSaaS project
icon: Rocket
---

# Getting Started

This is a guide to help you get started with MkSaaS.

## Installation

First, you need to install the dependencies...
```

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

### Preview Emails Locally

Source: https://mksaas.com/docs/email

Run this command to start a local server for previewing email templates in your browser before sending them.

```bash
pnpm run email
```

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

### Verify Environment Variables Setup

Source: https://mksaas.com/docs/env

Run this command to check if your environment variables are correctly configured. Successful execution indicates no environment-related errors.

```bash
pnpm run dev

```

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

### Example Landing Page Structure

Source: https://mksaas.com/docs/landingpage

Combines various block components to form a complete landing page. Ensure all imported components are correctly placed in the `src/components/blocks` directory.

```javascript
import HeroSection from '@/components/blocks/hero/hero';
import Features from '@/components/blocks/features/features';
import Testimonials from '@/components/blocks/testimonials/testimonials';
import Pricing from '@/components/blocks/pricing/pricing';
import CallToAction from '@/components/blocks/calltoaction/cta';
import Footer from '@/components/blocks/footer/footer';

export default function LandingPage() {
  return (
    <main>
      <HeroSection />
      <Features />
      <Testimonials />
      <Pricing />
      <CallToAction />
    </main>
  );
}
```

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

### Configure Vercel Build Settings

Source: https://mksaas.com/docs/deployment/vercel

Set the framework preset, build command, output directory, and install command for your Next.js project on Vercel.

```bash
pnpm build
```

```bash
pnpm install
```

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

### Check Git Version

Source: https://mksaas.com/docs/start

Verify if Git is installed on your system.

```bash
git --version
```

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

### Configure Drizzle for MySQL

Source: https://mksaas.com/docs/database

Example of setting up Drizzle ORM to use MySQL. Requires installing drizzle-orm/mysql2 and mysql2 packages. Update src/db/index.ts with the correct driver and connection.

```typescript
// 1. Install: pnpm add drizzle-orm mysql2
// 2. Update src/db/index.ts
import { drizzle } from 'drizzle-orm/mysql2';
import mysql from 'mysql2/promise';

const connection = await mysql.createConnection(process.env.DATABASE_URL!);
const db = drizzle(connection);

export default db;
```

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

### Check Node.js Version

Source: https://mksaas.com/docs/start

Verify if Node.js is installed on your system.

```bash
node --version
```

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

### Implementing a Custom Storage Provider

Source: https://mksaas.com/docs/storage

Extend MkSaaS by implementing the `StorageProvider` interface in a new file within `src/storage/provider`. This example shows the basic structure for a custom provider.

```typescript
import {
  PresignedUploadUrlParams,
  StorageProvider,
  UploadFileParams,
  UploadFileResult
} from '@/storage/types';

export class CustomStorageProvider implements StorageProvider {
  constructor() {
    // Initialize your storage service provider
  }

  public getProviderName(): string {
    return 'CustomProvider';
  }

  async uploadFile(params: UploadFileParams): Promise<UploadFileResult> {
    // Implementation for uploading a file
    return { url: 'https://example.com/file.jpg', key: 'file.jpg' };
  }

  async deleteFile(key: string): Promise<void> {
    // Implementation for deleting a file
  }
}
```

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

### English Translation Resource File

Source: https://mksaas.com/docs/landingpage

Example of a JSON resource file for English translations. Keys should match the paths used in `useTranslations` calls.

```json
{
  "LandingPage": {
    "Hero": {
      "headline": "Your Custom Headline Here",
      "subheading": "Your custom subheading text goes here.",
      "ctaPrimary": "Get Started",
      "ctaSecondary": "Learn More"
    }
  }
}
```

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

### Multi-language Meta File Example (Chinese)

Source: https://mksaas.com/docs/docs

A Chinese version of a meta.json file. The filename includes the locale code `.zh.json`, and the content is translated to Chinese.

```json
{
  "title": "文档",
  "pages": [
    "getting-started",
    {
      "title": "功能特性",
      "pages": ["features/auth", "features/database"]
    }
  ],
  "description": "完整的项目文档",
  "root": true,
  "icon": "BookOpen"
}
```

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

### Spanish Translation Resource File

Source: https://mksaas.com/docs/landingpage

Example of a JSON resource file for Spanish translations. Ensure keys align with the English file and `useTranslations` paths.

```json
{
  "LandingPage": {
    "Hero": {
      "headline": "Su Título Personalizado Aquí",
      "subheading": "Su texto de subtítulo personalizado va aquí.",
      "ctaPrimary": "Comenzar",
      "ctaSecondary": "Aprende Más"
    }
  }
}
```

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

### Dockerfile for MkSaaS Project

Source: https://mksaas.com/docs/deployment/docker

This Dockerfile is pre-configured for MkSaaS projects, handling dependency installation, building, and running the application in a production environment. It utilizes multi-stage builds to optimize the final image size.

```dockerfile
# syntax=docker/dockerfile:1
FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies
COPY package.json pnpm-lock.yaml* ./
# Copy config files needed for fumadocs-mdx postinstall
COPY source.config.ts ./
COPY content ./
RUN npm install -g pnpm && pnpm i --frozen-lockfile

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN npm install -g pnpm \
  && DOCKER_BUILD=true pnpm build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD ["node", "server.js"]
```

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

### GitHub Actions Workflow for Credit Distribution

Source: https://mksaas.com/docs/cronjobs

This workflow file defines a scheduled job to run credit distribution tasks daily. It includes steps for checking out code, setting up Node.js and pnpm, installing dependencies, and executing the credit distribution script.

```yaml
name: Distribute Credits
on:
  schedule:
    - cron: '10 0 * * *'
  workflow_dispatch:
jobs:
  distribute:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Install pnpm
        uses: pnpm/action-setup@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Run credit distribution
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
          FEISHU_WEBHOOK_URL: ${{ secrets.FEISHU_WEBHOOK_URL }}
        run: pnpm run distribute-credits

```

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

### Local PostgreSQL Connection String

Source: https://mksaas.com/docs/database

Use this connection string when running PostgreSQL locally via Docker or direct installation. Ensure the username, password, host, port, and database name are correct.

```bash
DATABASE_URL="postgres://postgres:mypassword@localhost:5432/postgres"
```

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

### Build Project

Source: https://mksaas.com/docs/updates

Run the build command to create a production-ready build of your application.

```bash
pnpm run build
```

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

### Configure Affiliate Program

Source: https://mksaas.com/docs/config/website

Enable affiliate functionality and select the desired provider ('affonso' or 'promotekit').

```typescript
affiliates: {
  enable: true,
  provider: 'affonso', // or 'promotekit'
}

```

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

### Configure Website Credits

Source: https://mksaas.com/docs/config/website

Set up the credit system, including registration gifts and purchasable packages. Ensure environment variables for prices are correctly set.

```typescript
credits: {
  enableCredits: false,
  enablePackagesForFreePlan: false,
  registerGiftCredits: {
    enable: true,
    credits: 50,
    expireDays: 30,
  },
  packages: {
    basic: {
      id: 'basic',
      popular: false,
      credits: 100,
      expireDays: 30,
      price: {
        priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC!,
        amount: 990,
        currency: 'USD',
        allowPromotionCode: true,
      },
    },
    // ... other credit packages ...
  },
},
```

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

### Configure Affiliate Environment Variables

Source: https://mksaas.com/docs/affiliates

Add your affiliate program IDs to your .env file. Ensure you replace 'YOUR-AFFONSO-ID' and 'YOUR-PROMOTEKIT-ID' with your actual program IDs.

```env
NEXT_PUBLIC_AFFILIATE_AFFONSO_ID="YOUR-AFFONSO-ID"
NEXT_PUBLIC_AFFILIATE_PROMOTEKIT_ID="YOUR-PROMOTEKIT-ID"
```

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

### Set Up Admin User via Database

Source: https://mksaas.com/docs/usermanagement

Use Drizzle Studio to access the database and update a user's role to 'admin'. This grants administrative privileges.

```bash
pnpm db:studio
```

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

### Manual Deployment with Wrangler CLI

Source: https://mksaas.com/docs/deployment/cloudflare-d1

Deploy your application directly from your local machine using the `pnpm run deploy` command.

```bash
pnpm run deploy
```

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

### Create a New Blog Post

Source: https://mksaas.com/docs/blog

Create an MDX file in the `content/blog` directory for a new blog post, including title, description, date, and content.

```mdx
---
title: My First Blog Post
description: This is a brief description of my first blog post.
image: https://cdn.mksaas.com/mksaas/images/blog/my-first-post.jpg
date: "2023-12-01"
published: true
categories: ["tutorial", "announcement"]
author: "mksaas"
---

# Introduction

This is my first blog post. Here I'll talk about something interesting.

## Section 1

Some content here...

## Section 2

More content here...
```

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

### Using YoutubeVideo in MDX

Source: https://mksaas.com/docs/docs

Example of using the custom YoutubeVideo component within an MDX file to embed a YouTube video.

```markdown
---
title: Themes
description: Learn how to customize the themes in your MkSaaS website
icon: Palette
---

# Theme Tutorial

Video tutorial:

<YoutubeVideo url="https://www.youtube.com/embed/jHzdo1Bm9Lk?si=unAfwFdnRCvDXdGu" />

The video above demonstrates how to customize themes in your MkSaaS website.
```

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

### Internationalized Hero Component Example

Source: https://mksaas.com/docs/landingpage

This component demonstrates how to use `useTranslations` for text content and `LocaleLink` for localized URLs, ensuring proper internationalization.

```javascript
import { useTranslations } from 'next-intl';
import { LocaleLink } from '@/i18n/navigation';
import { TextEffect } from '@/components/tailark/motion/text-effect';
import { Button } from '@/components/ui/button';

export default function HeroSection() {
  const t = useTranslations('HomePage.hero');

  return (
    <section>
      <h1>
        <TextEffect preset="fade-in-blur">
          {t('title')}
        </TextEffect>
      </h1>
      <p>{t('description')}</p>
      <Button asChild>
        <LocaleLink href="/get-started">
          {t('cta')}
        </LocaleLink>
      </Button>
    </section>
  );
}
```

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

### Configure GitHub OAuth

Source: https://mksaas.com/docs/auth

Set up GitHub authentication by registering an OAuth app. Copy the Client ID and Client Secret to your environment variables and enable the feature in website.tsx.

```dotenv
GITHUB_CLIENT_ID="YOUR-GITHUB-CLIENT-ID"
GITHUB_CLIENT_SECRET="YOUR-GITHUB-CLIENT-SECRET"
```

```typescript
auth: {
  enableGithubLogin: true,
}
```

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

### Initialize SQLite Database with Drizzle ORM

Source: https://mksaas.com/docs/database

Install the necessary packages and update your index.ts file to initialize a SQLite database connection using Drizzle ORM.

```typescript
// 1. Install: pnpm add drizzle-orm better-sqlite3
// 2. Update src/db/index.ts
import { drizzle } from 'drizzle-orm/better-sqlite3';
import Database from 'better-sqlite3';

const sqlite = new Database('sqlite.db');
const db = drizzle(sqlite);

export default db;
```

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

### Nested Documentation Structure Meta File

Source: https://mksaas.com/docs/docs

Example of a meta.json file for a nested documentation folder. It defines the title, pages within that section, and other metadata for the group.

```json
{
  "title": "Features",
  "pages": ["auth", "database"],
  "description": "Learn about key features",
  "root": false,
  "icon": "Star"
}
```

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

### Enable Affiliate Features in Website Configuration

Source: https://mksaas.com/docs/affiliates

Configure affiliate settings in `src/config/website.tsx`. Set `enable` to `true` and specify your chosen `provider` ('affonso' or 'promotekit').

```typescript
affiliates: {
  enable: true,
  provider: 'affonso', // or 'promotekit'
}
```

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

### Build and Run Docker Image Locally

Source: https://mksaas.com/docs/deployment/docker

These commands demonstrate how to build a Docker image for your MkSaaS project and run it locally for testing purposes. The image is tagged as 'mksaas-template' and exposed on port 3000.

```bash
docker build . --no-cache -t mksaas-template
docker run -p 3000:3000 mksaas-template
```

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

### Example Privacy Policy MDX

Source: https://mksaas.com/docs/pages

MDX file structure for legal pages, including frontmatter metadata and content body. Update frontmatter for title, description, and date.

```mdx
---
title: Privacy Policy
description: Our commitment to protecting your privacy and personal data
date: "2025-03-10"
published: true
---

## Introduction

Welcome to our Privacy Policy. This document explains how we collect, use, and protect your personal information when you use our services.

... more content ...

```

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

### Example Changelog Entry MDX

Source: https://mksaas.com/docs/pages

MDX file structure for changelog entries, including frontmatter metadata and release notes. Add new files to content/changelog for new releases.

```mdx
---
title: "Initial Release"
description: "Our first official release with core features and functionality"
date: "2024-03-01"
version: "v1.0.0"
published: true
---

### Core Features

We're excited to announce the initial release of our platform with the following core features:

- **User Authentication**: Secure login and registration with email verification
- **Dashboard**: Intuitive dashboard for managing your projects and resources

... more content ...

```

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

### Initialize Cloudflare D1 Database

Source: https://mksaas.com/docs/deployment/cloudflare-d1

Run database migrations to initialize the D1 database structure. This includes generating migration files and applying them locally or remotely.

```bash
pnpm db:generate
pnpm db:migrate
pnpm db:migrate:prod
pnpm db:studio
pnpm db:studio:prod
```

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

### Barrel Exports for UI Components

Source: https://mksaas.com/docs/structure

Use barrel exports in `index.ts` files to simplify imports of components from a directory. This example shows how to re-export Button, Card, and Input components.

```typescript
// components/ui/index.ts
export * from './Button';
export * from './Card';
export * from './Input';

// Usage
import { Button, Card, Input } from '@/components/ui';
```

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

### Enable Credits in Configuration

Source: https://mksaas.com/docs/credits

Configure the main credits system settings in `src/config/website.tsx`. This includes enabling the system, controlling package purchases for free users, and setting up registration gifts.

```typescript
export const websiteConfig = {
  // ...other config
  credits: {
    enableCredits: true, // Enable credits system
    enablePackagesForFreePlan: false, // disable free users to purchase credits
    registerGiftCredits: {
      enable: true, // Give credits on registration
      amount: 10, // Number of credits to gift
      expireDays: 30, // Optional: days before credits expire
    },
    packages: {
      basic: {
        id: 'basic',
        amount: 100,
        price: {
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC!,
          amount: 990,
          currency: 'USD',
        },
        popular: false,
      },
      // ...other packages
    },
  },
  // ...other config
}
```

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

### Run Linting and Formatting

Source: https://mksaas.com/docs/updates

Execute linting and formatting commands to ensure code quality and consistency.

```bash
pnpm run lint
pnpm run format
```

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

### Define PostgreSQL Table Schema with Drizzle

Source: https://mksaas.com/docs/database

Example of defining a 'user' table schema using Drizzle ORM for PostgreSQL. Includes primary key, not null, and unique constraints.

```typescript
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";

export const user = pgTable("user", {
  id: text("id").primaryKey(),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  // ... other fields
});

// ... other tables
```

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

### Font Usage Examples with Tailwind CSS

Source: https://mksaas.com/docs/fonts

Demonstrates how to apply different font families (serif, mono, custom) to specific HTML elements using Tailwind CSS utility classes.

```html
// Using the default font (no need to specify)
<p>This text uses the default font.</p>

// Using a specific font family with Tailwind CSS
<h1 className="font-serif">This heading uses the serif font</h1>

// Using monospace font for code
<code className="font-mono">console.log('Hello, world!');</code>

// Using the decorative font for a special heading
<h2 className="font-bricolage">Special Section</h2>

// Using a custom font (if added)
<p className="font-custom">This text uses a custom font.</p>
```

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

### Set Stripe Webhook Secret Environment Variable

Source: https://mksaas.com/docs/payment/stripe

After starting the Stripe CLI listener, copy the provided webhook secret and add it to your environment variables file to verify webhook events.

```bash
STRIPE_WEBHOOK_SECRET=whsec_...
```

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

### Premium Blog Post Configuration

Source: https://mksaas.com/docs/blog

Configure a blog post as premium by setting the `premium` field to `true` in the frontmatter. This enables conditional content display.

```mdx
---
title: Premium Post
...
premium: true
---

This is the free content part.

...

<PremiumContent>

This is the paid content part.

...

</PremiumContent>
```

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

### Configure DataFast Environment Variables

Source: https://mksaas.com/docs/analytics

Set `NEXT_PUBLIC_DATAFAST_WEBSITE_ID` and `NEXT_PUBLIC_DATAFAST_DOMAIN` for DataFast analytics.

```env
NEXT_PUBLIC_DATAFAST_WEBSITE_ID="YOUR-WEBSITE-ID"
NEXT_PUBLIC_DATAFAST_DOMAIN="YOUR-DOMAIN"
```

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

### Configure Google OAuth

Source: https://mksaas.com/docs/auth

Enable Google authentication by obtaining OAuth client credentials from Google Cloud Console. Add these to your environment variables and enable the feature in website.tsx.

```dotenv
GOOGLE_CLIENT_ID="YOUR-GOOGLE-CLIENT-ID"
GOOGLE_CLIENT_SECRET="YOUR-GOOGLE-CLIENT-SECRET"
```

```typescript
auth: {
  enableGoogleLogin: true,
}
```

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

### Implement Slack Notification Function

Source: https://mksaas.com/docs/notification

Create a new notification function for Slack, checking for the webhook URL and sending a formatted message. This example uses the fetch API to send a POST request.

```typescript
export async function sendMessageToSlack(
  sessionId: string,
  customerId: string,
  userName: string,
  amount: number
): Promise<void> {
  try {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL;
    if (!webhookUrl) {
      console.warn('SLACK_WEBHOOK_URL is not set, skipping Slack notification');
      return;
    }

    // Your Slack message implementation
    await fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: `🎉 New Purchase\nUsername: ${userName}\nAmount: $${amount.toFixed(2)}`,
      }),
    });
  } catch (error) {
    console.error('Failed to send Slack notification:', error);
  }
}
```

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

### Set Environment Variables for Production

Source: https://mksaas.com/docs/deployment/vercel

Add necessary environment variables for your production environment on Vercel. Ensure all required variables are included.

```bash
NEXT_PUBLIC_BASE_URL="https://YOUR-DOMAIN.com"
DATABASE_URL="YOUR-DATABASE-URL"
BETTER_AUTH_SECRET="YOUR-BETTER-AUTH-SECRET"
RESEND_API_KEY="YOUR-RESEND-API-KEY"
...
```

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

### Get Credit Packages with Translations

Source: https://mksaas.com/docs/config/credits

This function retrieves credit packages and enriches them with translated names and descriptions using a translation utility. It conditionally adds packages based on their existence in the website configuration.

```typescript
// Returns credit packages with translated content
export function getCreditPackages(): Record<string, CreditPackage> {
  const t = useTranslations('CreditPackages');
  const creditsConfig = websiteConfig.credits;
  const packages: Record<string, CreditPackage> = {};

  // Add translated content to each package
  if (creditsConfig.packages.basic) {
    packages.basic = {
      ...creditsConfig.packages.basic,
      name: t('basic.name'),
      description: t('basic.description'),
    };
  }
  ...
```

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

### Create Cloudflare Hyperdrive Binding

Source: https://mksaas.com/docs/deployment/cloudflare

Create a Hyperdrive configuration for your production database using the Wrangler CLI.

```bash
npx wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string="postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name"
```

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

### Get Price Plans with Translated Content

Source: https://mksaas.com/docs/config/price

Use this function to retrieve price plans that include locale-specific translated names, descriptions, features, and limits. Ensure the `useTranslations` hook is available in your client-side component context.

```typescript
// Returns price plans with translated content
export function getPricePlans(): Record<string, PricePlan> {
  const t = useTranslations('PricePlans');
  const priceConfig = websiteConfig.price;
  const plans: Record<string, PricePlan> = {};

  // Add translated content to each plan
  if (priceConfig.plans.free) {
    plans.free = {
      ...priceConfig.plans.free,
      name: t('free.name'),
      description: t('free.description'),
      features: [
        t('free.features.feature-1'),
        t('free.features.feature-2'),
        t('free.features.feature-3'),
        t('free.features.feature-4'),
      ],
      limits: [
        t('free.limits.limit-1'),
        t('free.limits.limit-2'),
        t('free.limits.limit-3'),
      ],
    };
  }
  ...
}
```

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

### Format Code Automatically

Source: https://mksaas.com/docs/lint

Run this command to automatically format all supported files according to the project's defined style rules.

```bash
pnpm run format
```

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

### Configure Local Development Database Connection

Source: https://mksaas.com/docs/deployment/cloudflare

Update 'wrangler.jsonc' with your local PostgreSQL connection string for development.

```json
{
  "hyperdrive": [
    {
      "binding": "HYPERDRIVE",
      "id": "YOUR_HYPERDRIVE_ID_HERE",
      "localConnectionString": "postgres://user:password@localhost:5432/your_local_database"
    }
  ]
}
```

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

### Define Basic Website Information in en.json

Source: https://mksaas.com/docs/metadata

Sets the default name, title, and description for your website in English. Update this for your primary language.

```json
{
  "Metadata": {
    "name": "MkSaaS",
    "title": "MkSaaS - The Best AI SaaS Boilerplate",
    "description": "MkSaaS is the best AI SaaS boilerplate. Make AI SaaS in days, simply and effortlessly"
  },
  // other translations...
}

```

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

### Organize Documentation with Meta Files

Source: https://mksaas.com/docs/docs

Defines the structure and order of documentation pages using a meta.json file. This allows for custom titles, page ordering, and grouping of related documents.

```json
{
  "title": "Documentation",
  "pages": [
    "getting-started",
    {
      "title": "Features",
      "pages": ["features/auth", "features/database"]
    },
    {
      "title": "Deployment",
      "pages": ["deployment/hosting", "deployment/ci-cd"]
    }
  ],
  "description": "Complete documentation for your project",
  "root": true,
  "icon": "BookOpen"
}
```

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

### Configure Website Price Plans

Source: https://mksaas.com/docs/config/website

Defines the pricing structure for different plans, including free, pro (monthly/yearly), and lifetime options. Each plan includes details on prices, credits, and plan-specific settings.

```typescript
price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
      credits: {
        enable: true,
        amount: 50,
        expireDays: 30,
      },
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: PlanIntervals.MONTH,
        },
        {
          type: PaymentTypes.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: PlanIntervals.YEAR,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: PaymentTypes.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
      credits: {
        enable: true,
        amount: 1000,
        expireDays: 30,
      },
    },
  },
},
```

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

### Generate Database Migration Files

Source: https://mksaas.com/docs/updates

Execute this command to generate migration files based on changes in the database schema, typically found in `src/db/schema.ts`.

```bash
pnpm run db:generate
```

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

### Configure Documentation Source with Fumadocs MDX

Source: https://mksaas.com/docs/docs

Defines the documentation collection, including schemas for frontmatter and metadata. Use this to set up the directory structure and custom frontmatter properties.

```typescript
import { defineDocs, frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';
import { z } from 'zod';

// Documentation collection
export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    schema: frontmatterSchema.extend({
      preview: z.string().optional(),
      index: z.boolean().default(false),
    }),
  },
  meta: {
    schema: metaSchema.extend({
      description: z.string().optional(),
    }),
  },
});
```

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

### Configure Storage Service

Source: https://mksaas.com/docs/config/website

Configure file storage settings, including enabling the service and selecting the provider. 's3' is the only supported provider.

```typescript
storage: {
  enable: true,
  provider: 's3',
}
```

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

### Set Neon Database URL

Source: https://mksaas.com/docs/database

Add the Neon connection string to your environment variables file as DATABASE_URL. Ensure sslmode is set to require.

```bash
DATABASE_URL="postgres://user:password@ep-something.us-east-2.aws.neon.tech/database?sslmode=require"
```

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

### Configure Credit Packages

Source: https://mksaas.com/docs/credits

Define credit packages in `src/config/website.tsx` under `credits.packages`. Each package requires an ID, credit amount, and pricing information, with optional fields for popularity and expiration.

```typescript
packages: {
  basic: {
    id: 'basic',
    amount: 100,
    price: {
      priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC!,
      amount: 990,
      currency: 'USD',
    },
    popular: false,
    expireDays: 30,
  },
  // ...
}
```

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

### Configure PostHog Environment Variables

Source: https://mksaas.com/docs/analytics

Set `NEXT_PUBLIC_POSTHOG_KEY` and `NEXT_PUBLIC_POSTHOG_HOST` with your PostHog Project API Key and Host Server Domain.

```env
NEXT_PUBLIC_POSTHOG_KEY="YOUR-PROJECT-KEY"
NEXT_PUBLIC_POSTHOG_HOST="YOUR-HOST"
```

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

### Configure Website Internationalization (i18n)

Source: https://mksaas.com/docs/config/website

Set up language support by defining the default locale and a record of available locales, including their display names and optional flags. Ensure hreflang is correctly configured for SEO.

```typescript
i18n: {
  defaultLocale: 'en',
  locales: {
    en: {
      flag: '🇺🇸',
      name: 'English',
      hreflang: 'en',
    },
    zh: {
      flag: '🇨🇳',
      name: '中文',
      hreflang: 'zh-CN',
    },
    // Add more languages as needed
  },
}
```

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

### Configure Favicons and App Icons

Source: https://mksaas.com/docs/metadata

Set the paths for favicons and app icons in the metadata configuration. These files should be placed in the public directory.

```typescript
icons: {
  icon: '/favicon.ico',
  shortcut: '/favicon-32x32.png',
  apple: '/apple-touch-icon.png',
}
```

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

### Apply Database Migrations

Source: https://mksaas.com/docs/updates

Apply the generated migration files to your database to update its schema.

```bash
pnpm run db:migrate
```

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

### Configure Environment Variables for Cloudflare D1

Source: https://mksaas.com/docs/deployment/cloudflare-d1

Set environment variables for Cloudflare D1. Ensure DATABASE_URL remains an empty string when using D1.

```bash
DATABASE_URL=""
CLOUDFLARE_ACCOUNT_ID="YOUR_ACCOUNT_ID_HERE"
CLOUDFLARE_DATABASE_ID="YOUR_DATABASE_ID_HERE"
CLOUDFLARE_API_TOKEN="YOUR_API_TOKEN_HERE"
```

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

### MDX-Based Page Component Template

Source: https://mksaas.com/docs/pages

Use this template for content-heavy pages. It fetches page content using `getPage` and renders it with `CustomPage`. Ensure the 'faq' slug and locale are correctly passed.

```typescript
import {
  CustomPage
} from '@/components/page/custom-page';
import {
  constructMetadata
} from '@/lib/metadata';
import {
  getPage
} from '@/lib/page/get-page';
import {
  getUrlWithLocale
} from '@/lib/urls/urls';
import type {
  NextPageProps
} from '@/types/next-page-props';
import type {
  Metadata
} from 'next';
import type {
  Locale
} from 'next-intl';
import {
  getTranslations
} from 'next-intl/server';
import {
  notFound
} from 'next/navigation';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: Locale }>;
}): Promise<Metadata | undefined> {
  const { locale } = await params;
  const page = await getPage('faq', locale);

  if (!page) {
    return {};
  }

  const t = await getTranslations({ locale, namespace: 'Metadata' });

  return constructMetadata({
    title: page.title + ' | ' + t('title'),
    description: page.description,
    canonicalUrl: getUrlWithLocale('/faq', locale),
  });
}

export default async function FAQPage(props: NextPageProps) {
  const params = await props.params;
  if (!params) {
    notFound();
  }

  const locale = params.locale as string;
  const page = await getPage('faq', locale);

  if (!page) {
    notFound();
  }

  return (
    <CustomPage
      title={page.title}
      description={page.description}
      date={page.date}
      content={page.body}
    />
  );
}

```
Tokens:
Raw