Configuration Overview

Your SaaS starter boilerplate includes two main configuration files inside the /config directory:

site.ts — defines global metadata and links used across your app.
landing.ts — manages all content displayed on the marketing (landing) page.

These files help you customize branding, SEO, and marketing content without modifying core logic.

/config/site.ts

The site.ts file defines global information about your SaaS project, such as name, URL, meta description, support email, and social media links.

This configuration is used for:

Metadata and SEO tags
Social and footer links
Support and contact information
Open Graph image for link previews

Example:

import { SiteConfig } from "@/types"

const site_url = "https://yourdomain.com"

export const siteConfig: SiteConfig = {
  name: "Shippify - Next.JS Firebase boilerplate",
  description:
    "Launch your Startup in a weekend with nextJS and firebase boilerplate.",
  url: site_url,
  ogImage: `${site_url}/og-image.png`,
  links: {
    twitter: "https://x.com/yourusername",
    github: "https://github.com/yourusername",
  },
  mailSupport: "contact@saaskit.com",
}

Tips:

Update site_url to match your live domain.
Replace social links with your own.
Ensure the ogImage path exists under /public/images/.
Use mailSupport wherever support contact is needed.

/config/landing.ts

The landing.ts file contains all the data displayed on your landing page — including hero sections, pricing plans, FAQs, and feature lists.

This makes it easy to manage content and marketing copy in one place, without editing UI components.

Simplified example:

export const appName = process.env.NEXT_PUBLIC_APP_NAME;

export const infos = [
  {
    title: "Everything You Need to Launch Faster",
    description:
      "Unlock the full potential of your projects with our NextJS and Firebase SaaS boilerplate.",
    icons1: ["firebase", "stripe", "tailwind"],
    icons2: ["openai", "google"],
    list: [
      { title: "Firebase", description: "Auth, Firestore and Storage.", icon: "firebase" },
      { title: "Next.JS", description: "Optimized routes and APIs.", icon: "nextjs" },
      { title: "Stripe Integration", description: "Checkout and subscriptions ready.", icon: "stripe" },
    ],
  },
];

export const faqs = [
  {
    question: "What technologies are included?",
    answer:
      "The boilerplate includes Next.js, Firebase, React, TypeScript, Tailwind CSS, Stripe, and more.",
  },
  {
    question: "Do I get lifetime updates?",
    answer: "Yes, all plans include lifetime updates with new features and improvements.",
  },
];

export const plans = [
  {
    name: "Free",
    price: { monthly: 0, yearly: 0 },
    description: "Perfect for trying out the boilerplate.",
    features: ["1 workspace", "Basic AI content", "Community support"],
    cta: "Start Free",
    popular: false,
  },
  {
    name: "Pro",
    price: { monthly: 19, yearly: 15 },
    description: "Ideal for small teams and startups.",
    features: [
      "10 blog posts per month",
      "AI content",
      "Priority support",
      "SEO optimization",
    ],
    cta: "Start Now",
    popular: true,
  },
];

export const withWithout = [
  {
    title: "Without Boilerplate",
    description: "Starting a SaaS from scratch is a real headache.",
    result: "Months of work, delayed launch.",
    features: [
      { title: "Manual Firebase setup" },
      { title: "Complex Stripe webhooks" },
      { title: "Build UI components from scratch" },
    ],
  },
  {
    title: "With Boilerplate",
    description: "Get started at the speed of light.",
    result: "Launch your dream SaaS in a weekend.",
    features: [
      { title: "Ready-to-use auth hooks" },
      { title: "Prebuilt Stripe flow" },
      { title: "1-click Vercel deployment" },
    ],
  },
];

export const whatYouGetFeatures = [
  { title: "Clean Codebase", description: "Well-structured and documented code." },
  { title: "Production Ready", description: "Optimized for performance with CI/CD setup." },
  { title: "Regular Updates", description: "Stay current with new features and fixes." },
];

export const youtubeDemoVideoId = "videoIdHere";

Tips:

All sections map directly to UI components (e.g., pricing, FAQs, hero features).
Modify or remove entries as needed — the UI auto-updates.
Replace youtubeDemoVideoId with your actual demo video ID.

Best Practices

Use site.ts for global metadata and app-wide configuration.
Use landing.ts for landing page and marketing content.
Avoid adding logic — keep these files data-only for maintainability.

Public Payments

Configuration Overview

Your SaaS starter boilerplate includes two main configuration files inside the /config directory:

site.ts — defines global metadata and links used across your app.

landing.ts — manages all content displayed on the marketing (landing) page.

These files help you customize branding, SEO, and marketing content without modifying core logic.

/config/site.ts

The site.ts file defines global information about your SaaS project, such as name, URL, meta description, support email, and social media links.

This configuration is used for:

Metadata and SEO tags
Social and footer links
Support and contact information
Open Graph image for link previews

Example:

import { SiteConfig } from "@/types"

const site_url = "https://yourdomain.com"

export const siteConfig: SiteConfig = {
  name: "Shippify - Next.JS Firebase boilerplate",
  description:
    "Launch your Startup in a weekend with nextJS and firebase boilerplate.",
  url: site_url,
  ogImage: `${site_url}/og-image.png`,
  links: {
    twitter: "https://x.com/yourusername",
    github: "https://github.com/yourusername",
  },
  mailSupport: "contact@saaskit.com",
}

Tips:

Update site_url to match your live domain.
Replace social links with your own.
Ensure the ogImage path exists under /public/images/.
Use mailSupport wherever support contact is needed.

/config/landing.ts

The landing.ts file contains all the data displayed on your landing page — including hero sections, pricing plans, FAQs, and feature lists.

This makes it easy to manage content and marketing copy in one place, without editing UI components.

Simplified example:

export const appName = process.env.NEXT_PUBLIC_APP_NAME;

export const infos = [
  {
    title: "Everything You Need to Launch Faster",
    description:
      "Unlock the full potential of your projects with our NextJS and Firebase SaaS boilerplate.",
    icons1: ["firebase", "stripe", "tailwind"],
    icons2: ["openai", "google"],
    list: [
      { title: "Firebase", description: "Auth, Firestore and Storage.", icon: "firebase" },
      { title: "Next.JS", description: "Optimized routes and APIs.", icon: "nextjs" },
      { title: "Stripe Integration", description: "Checkout and subscriptions ready.", icon: "stripe" },
    ],
  },
];

export const faqs = [
  {
    question: "What technologies are included?",
    answer:
      "The boilerplate includes Next.js, Firebase, React, TypeScript, Tailwind CSS, Stripe, and more.",
  },
  {
    question: "Do I get lifetime updates?",
    answer: "Yes, all plans include lifetime updates with new features and improvements.",
  },
];

export const plans = [
  {
    name: "Free",
    price: { monthly: 0, yearly: 0 },
    description: "Perfect for trying out the boilerplate.",
    features: ["1 workspace", "Basic AI content", "Community support"],
    cta: "Start Free",
    popular: false,
  },
  {
    name: "Pro",
    price: { monthly: 19, yearly: 15 },
    description: "Ideal for small teams and startups.",
    features: [
      "10 blog posts per month",
      "AI content",
      "Priority support",
      "SEO optimization",
    ],
    cta: "Start Now",
    popular: true,
  },
];

export const withWithout = [
  {
    title: "Without Boilerplate",
    description: "Starting a SaaS from scratch is a real headache.",
    result: "Months of work, delayed launch.",
    features: [
      { title: "Manual Firebase setup" },
      { title: "Complex Stripe webhooks" },
      { title: "Build UI components from scratch" },
    ],
  },
  {
    title: "With Boilerplate",
    description: "Get started at the speed of light.",
    result: "Launch your dream SaaS in a weekend.",
    features: [
      { title: "Ready-to-use auth hooks" },
      { title: "Prebuilt Stripe flow" },
      { title: "1-click Vercel deployment" },
    ],
  },
];

export const whatYouGetFeatures = [
  { title: "Clean Codebase", description: "Well-structured and documented code." },
  { title: "Production Ready", description: "Optimized for performance with CI/CD setup." },
  { title: "Regular Updates", description: "Stay current with new features and fixes." },
];

export const youtubeDemoVideoId = "videoIdHere";

Tips:

All sections map directly to UI components (e.g., pricing, FAQs, hero features).
Modify or remove entries as needed — the UI auto-updates.
Replace youtubeDemoVideoId with your actual demo video ID.

Configuration Files: site.ts & landing.ts

Configuration Overview

/config/site.ts

/config/landing.ts

Best Practices

Configuration Files: site.ts & landing.ts

Configuration Overview

/config/site.ts

/config/landing.ts

Best Practices