Website Configuration

The main configuration file that contains the core settings for the website.

MkSaaS boilerplate has already set up the default core settings for you, and you can customize the core settings in this file src/config/website.tsx.

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  metadata: {
    // Theme, mode, images, and social settings
  },
  i18n: {
    // Internationalization settings
  },
  blog: {
    // Blog settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
  price: {
    // Price settings
  },
};

Metadata

Controls the appearance and branding of your website. The metadata configuration consists of several subsections:

Theme

Controls the color theme of the website:

Property	Type	Description
`defaultTheme`	`'default' \| 'blue' \| 'green' \| 'amber' \| 'neutral'`	Sets the default color theme for the website
`enableSwitch`	`boolean`	When true, allows users to change the color theme

Example:

src/config/website.tsx

metadata: {
  theme: {
    defaultTheme: 'default', // Choose from: default, blue, green, amber, neutral
    enableSwitch: true,      // Allow users to switch themes
  },
  // ...
}

Mode

Controls the light/dark mode settings:

Property	Type	Description
`defaultMode`	`'light' \| 'dark' \| 'system'`	Sets the default display mode
`enableSwitch`	`boolean`	When true, allows users to toggle between light/dark modes

Example:

src/config/website.tsx

metadata: {
  mode: {
    defaultMode: 'system', // Choose from: light, dark, system
    enableSwitch: true,    // Allow users to switch modes
  },
  // ...
}

Images

Defines the images used for branding and social sharing:

Property	Type	Description
`ogImage`	`string`	URL to the Open Graph image used for social media previews
`logoLight`	`string`	URL to your logo image for light mode
`logoDark`	`string`	URL to your logo image for dark mode

Example:

src/config/website.tsx

metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.png',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

Configure links to your social media profiles:

Property	Type	Description
`twitter`	`string`	URL to your Twitter/X profile
`github`	`string`	URL to your GitHub profile or repository
`discord`	`string`	URL to your Discord server
`blueSky`	`string`	URL to your BlueSky profile
`youtube`	`string`	URL to your YouTube channel
`linkedin`	`string`	URL to your LinkedIn profile or page
`facebook`	`string`	URL to your Facebook page
`instagram`	`string`	URL to your Instagram profile
`tiktok`	`string`	URL to your TikTok profile

Example:

src/config/website.tsx

metadata: {
  social: {
    github: 'https://github.com/YourOrganization',
    twitter: 'https://twitter.com/YourHandle',
    discord: 'https://discord.gg/your-invitation-code',
    youtube: 'https://youtube.com/@YourChannel',
    // Add other social platforms as needed
  },
  // ...
}

These social media links are used by the social-config.tsx file to generate the appropriate icon links across the website.

Analytics

Configure analytics services for your website:

Property	Type	Description
`enableVercelAnalytics`	`boolean`	When true, enables Vercel Web Analytics
`enableSpeedInsights`	`boolean`	When true, enables Vercel Speed Insights

Example:

src/config/website.tsx

analytics: {
  enableVercelAnalytics: true,  // Enable Vercel Web Analytics
  enableSpeedInsights: true,    // Enable Vercel Speed Insights
}

Vercel Analytics and Speed Insights are privacy-friendly analytics tools that don't require cookie banners. They provide insights into your website's performance and user behavior.

To enable these services:

Go to your Vercel project dashboard
Navigate to the Analytics tab
Enable Web Analytics and/or Speed Insights
Set the corresponding configuration options to true

For more details, see the Analytics documentation.

Auth

Configure authentication options for your website:

Property	Type	Description
`enableGoogleLogin`	`boolean`	When true, enables Google as a login provider
`enableGithubLogin`	`boolean`	When true, enables GitHub as a login provider

Example:

src/config/website.tsx

auth: {
  enableGoogleLogin: true,  // Allow Google login
  enableGithubLogin: true,  // Allow GitHub login
}

MkSaaS supports multiple authentication providers by default. You can selectively disable specific providers using these configuration options:

Set enableGoogleLogin to false to remove Google as a login option
Set enableGithubLogin to false to remove GitHub as a login option

Internationalization (i18n)

Configure language support for your application:

Property	Type	Description
`defaultLocale`	`string`	Default language locale (e.g., 'en')
`locales`	`Record<string, { flag?: string; name: string }>`	Available languages with flag emoji and display name

MkSaaS supports multiple languages through its i18n system. Here's how to configure it:

src/config/website.tsx

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

For each supported language:

The key is the locale code (e.g., 'en', 'es', 'fr')
flag is an optional emoji to visually represent the language
name is the display name of the language in its native form

When adding a new language, you'll also need to create the corresponding translation files in the messages directory to provide translations for all UI strings. The application will use these translations to display content in the user's selected language.

Blog

Configure the blog functionality:

Property	Type	Description
`paginationSize`	`number`	Number of posts to display per page
`relatedPostsSize`	`number`	Number of related posts to show

Example:

src/config/website.tsx

blog: {
  paginationSize: 6,
  relatedPostsSize: 3,
}

Mail

Configure email services:

Property	Type	Description
`provider`	`'resend'`	Email service provider (currently only Resend is supported)
`contact`	`string`	Contact email for sending and receiving emails

Example:

mail: {
  provider: 'resend',
  contact: 'contact@example.com',
}

Configure newsletter services:

Property	Type	Description
`provider`	`'resend'`	Newsletter service provider (currently only Resend is supported)
`autoSubscribeAfterSignUp`	`boolean`	Whether to automatically subscribe users after sign up

Example:

src/config/website.tsx

newsletter: {
  provider: 'resend',
  autoSubscribeAfterSignUp: true,
}

Storage

Configure file storage:

Property	Type	Description
`provider`	`'s3'`	Storage provider (currently only S3 is supported)

Example:

src/config/website.tsx

storage: {
  provider: 's3',
}

Payment

Configure payment processing services:

Property	Type	Description
`provider`	`'stripe'`	Payment processor (currently only Stripe is supported)

Example:

src/config/website.tsx

payment: {
  provider: 'stripe',
}

Price

Configure price plans:

Property	Type	Description
`plans`	`Record<string, PricePlan>`	Pricing plans configuration

Each price plan in the plans object can have the following properties:

Property	Type	Description
`id`	`string`	Unique identifier for the plan
`name`	`string?`	Display name of the plan
`description`	`string?`	Description of the plan features
`features`	`string[]?`	List of features included in this plan
`limits`	`string[]?`	List of limits for this plan
`prices`	`Price[]`	List of price options for the plan (monthly, yearly, one-time, etc.)
`isFree`	`boolean`	Whether this is a free plan
`isLifetime`	`boolean`	Whether this is a lifetime (one-time payment) plan
`recommended`	`boolean?`	Whether to highlight this plan as recommended
`disabled`	`boolean?`	Whether to disable this plan in UI

The prices array contains objects with the following structure:

Property	Type	Description
`type`	`'subscription' \| 'one_time'`	Type of payment (subscription or one-time)
`priceId`	`string`	Stripe price ID (not product ID)
`amount`	`number`	Price amount in currency units (dollars, euros, etc.)
`currency`	`string`	Currency code (e.g., USD)
`interval`	`'month' \| 'year'?`	Billing interval for recurring payments
`trialPeriodDays`	`number?`	Free trial period in days
`disabled`	`boolean?`	Whether to disable this price in UI

MkSaaS boilerplate uses three price plans by default: Free plan, Pro subscription plan (monthly/yearly), and Lifetime plan (one-time payment), as shown in the website configuration:

src/config/website.tsx

payment: {
  provider: 'stripe',
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      name: 'Pro',
      description: 'Perfect for individuals',
      features: ['Feature 1', 'Feature 2', 'Feature 3'],
      prices: [
        {
          type: 'subscription',
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY,
          amount: 990, // $9.90
          currency: 'USD',
          interval: 'month',
        },
        {
          type: 'subscription',
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY,
          amount: 9900, // $99.00
          currency: 'USD',
          interval: 'year',
        },
      ],
      isFree: false,
      isLifetime: false,
      recommended: true,
    },
    lifetime: {
      id: 'lifetime',
      name: 'Lifetime',
      description: 'One-time payment, lifetime access',
      features: ['All Pro features', 'No recurring bills', 'Lifetime updates'],
      prices: [
        {
          type: 'one_time',
          priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME,
          amount: 16900, // $169.00
          currency: 'USD',
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
}

When to set plans or prices as disabled?

Set a plan to disabled: true when the plan is not available for new customers, but you need to keep it for existing users who have already purchased it.
Set a price to disabled: true when that specific pricing option is not available anymore, but existing subscribers on that price should still be able to see it in the billing page.

When displaying plans to users, the Price Configuration enhances these plans with translated content such as name, description, and feature lists.

Metadata

Theme

Mode

Images

Analytics

Auth

Internationalization (i18n)

Blog

Mail

Storage

Payment

Price

Next Steps

Navbar Configuration

Footer Configuration

Payment Integration

Price Configuration

Table of Contents