App Settings

Core application configuration and settings management for your SaaS boilerplate.

App Configuration

The main app configuration is located in config/app.ts. This file contains:

Basic Settings


export const appConfig = {
  name: 'Your SaaS App',
  description: 'Build amazing SaaS applications faster',
  url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
 
  // Social Links
  social: {
    twitter: 'https://twitter.com/yourapp',
    github: 'https://github.com/yourorg/yourapp',
  },
 
  // Feature Flags
  features: {
    enableBetaFeatures: process.env.NEXT_PUBLIC_ENABLE_BETA_FEATURES === 'true',
    enableAnalytics: !!process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID,
  },
};

Subscription Plans

Configure your subscription plans in config/plans.ts:


export const plans = [
  {
    id: 'free',
    name: 'Free',
    description: 'Perfect for getting started',
    price: 0,
    features: ['1 workspace', 'Up to 5 team members', 'Basic features'],
    stripePriceId: null,
  },
  {
    id: 'pro',
    name: 'Pro',
    description: 'For growing teams',
    price: 19,
    features: [
      'Unlimited workspaces',
      'Unlimited team members',
      'Advanced features',
      'Priority support',
    ],
    stripePriceId: 'price_pro_monthly',
  },
];

Application Metadata

SEO Configuration


export const seoConfig = {
  title: 'Your SaaS App',
  description: 'Build amazing SaaS applications faster',
  keywords: ['saas', 'next.js', 'typescript', 'tailwind'],
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://yourdomain.com',
    siteName: 'Your SaaS App',
  },
};

Theme Configuration


export const themeConfig = {
  defaultTheme: 'system',
  enableSystem: true,
  themes: ['light', 'dark'],
  colors: {
    primary: 'hsl(221, 83%, 53%)',
    secondary: 'hsl(210, 40%, 98%)',
  },
};

Runtime Configuration

Next.js Configuration

Key settings in next.config.mjs:


const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ['example.com'],
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
};

TypeScript Configuration

Optimized TypeScript settings in tsconfig.json:


{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

Development vs Production

Development Settings


const isDevelopment = process.env.NODE_ENV === 'development';
 
export const devConfig = {
  enableDevTools: isDevelopment,
  logLevel: isDevelopment ? 'debug' : 'error',
  enableHotReload: isDevelopment,
};

Production Optimizations


export const prodConfig = {
  enableCompression: true,
  enableCaching: true,
  minifyAssets: true,
  enableCDN: true,
};

Custom Configuration

You can extend the configuration by:

Adding new config files in the config/ directory
Creating environment-specific configurations
Implementing feature flags for gradual rollouts
Setting up A/B testing configurations
Customizing theme and brand settings

Related: Environment Variables | Feature Flags