Configuration

Configure your application settings and feature flags.

Note: This is mock/placeholder content for demonstration purposes.

Customize your application behavior through configuration files.

Configuration Files

All configuration files are located in apps/web/config/:

config/
├── paths.config.ts        # Route paths
├── billing.config.ts      # Billing & pricing
├── feature-flags.config.ts # Feature toggles
├── personal-account-navigation.config.tsx
├── team-account-navigation.config.tsx
└── i18n.settings.ts       # Internationalization

Feature Flags

Control feature availability:

// config/feature-flags.config.ts
export const featureFlags = {
  enableTeamAccounts: true,
  enableBilling: true,
  enableNotifications: true,
  enableFileUploads: false,
  enableAnalytics: true,
  enableChat: false,
};

Using Feature Flags

import { featureFlags } from '~/config/feature-flags.config';

export function ConditionalFeature() {
  if (!featureFlags.enableChat) {
    return null;
  }

  return <ChatWidget />;
}

Path Configuration

Define application routes:

// config/paths.config.ts
export const pathsConfig = {
  auth: {
    signIn: '/auth/sign-in',
    signUp: '/auth/sign-up',
    passwordReset: '/auth/password-reset',
    callback: '/auth/callback',
  },
  app: {
    home: '/home',
    personalAccount: '/home',
    teamAccount: '/home/[account]',
    settings: '/home/settings',
    billing: '/home/settings/billing',
  },
  admin: {
    home: '/admin',
    users: '/admin/users',
    analytics: '/admin/analytics',
  },
};

Using Paths

import { pathsConfig } from '~/config/paths.config';
import Link from 'next/link';

<Link href={pathsConfig.app.settings}>
  Settings
</Link>

// config/personal-account-navigation.config.tsx
import { HomeIcon, SettingsIcon } from 'lucide-react';

export default [
  {
    label: 'common:routes.home',
    path: pathsConfig.app.personalAccount,
    Icon: <HomeIcon className="w-4" />,
    end: true,
  },
  {
    label: 'common:routes.settings',
    path: pathsConfig.app.settings,
    Icon: <SettingsIcon className="w-4" />,
  },
];

// config/team-account-navigation.config.tsx
export default [
  {
    label: 'common:routes.dashboard',
    path: createPath(pathsConfig.app.teamAccount, account),
    Icon: <LayoutDashboardIcon className="w-4" />,
    end: true,
  },
  {
    label: 'common:routes.projects',
    path: createPath(pathsConfig.app.projects, account),
    Icon: <FolderIcon className="w-4" />,
  },
  {
    label: 'common:routes.members',
    path: createPath(pathsConfig.app.members, account),
    Icon: <UsersIcon className="w-4" />,
  },
];

Billing Configuration

// config/billing.config.ts
export const billingConfig = {
  provider: 'stripe', // 'stripe' | 'paddle'
  enableTrial: true,
  trialDays: 14,

  plans: [
    {
      id: 'free',
      name: 'Free',
      price: 0,
      features: ['5 projects', 'Basic support'],
      limits: {
        projects: 5,
        members: 1,
      },
    },
    {
      id: 'pro',
      name: 'Professional',
      price: 29,
      interval: 'month',
      features: ['Unlimited projects', 'Priority support'],
      limits: {
        projects: -1, // unlimited
        members: 10,
      },
    },
  ],
};

Internationalization

// lib/i18n/i18n.settings.ts
export const i18nSettings = {
  defaultLocale: 'en',
  locales: ['en', 'es', 'fr', 'de'],
  defaultNamespace: 'common',
  namespaces: ['common', 'auth', 'billing', 'errors'],
};

Email Configuration

// config/email.config.ts
export const emailConfig = {
  from: {
    email: process.env.EMAIL_FROM || 'noreply@example.com',
    name: process.env.EMAIL_FROM_NAME || 'Your App',
  },
  provider: 'resend', // 'resend' | 'sendgrid' | 'postmark'
};

SEO Configuration

// config/seo.config.ts
export const seoConfig = {
  title: 'Your App Name',
  description: 'Your app description',
  ogImage: '/images/og-image.png',
  twitterHandle: '@yourapp',
  locale: 'en_US',

  // Per-page overrides
  pages: {
    home: {
      title: 'Home - Your App',
      description: 'Welcome to your app',
    },
    pricing: {
      title: 'Pricing - Your App',
      description: 'Simple, transparent pricing',
    },
  },
};

Theme Configuration

// config/theme.config.ts
export const themeConfig = {
  defaultTheme: 'system', // 'light' | 'dark' | 'system'
  enableColorSchemeToggle: true,

  colors: {
    primary: 'blue',
    accent: 'purple',
  },
};

Analytics Configuration

// config/analytics.config.ts
export const analyticsConfig = {
  googleAnalytics: {
    enabled: true,
    measurementId: process.env.NEXT_PUBLIC_GA_ID,
  },

  posthog: {
    enabled: false,
    apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY,
  },

  plausible: {
    enabled: false,
    domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
  },
};

Rate Limiting

// config/rate-limit.config.ts
export const rateLimitConfig = {
  api: {
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100, // requests per window
  },

  auth: {
    windowMs: 15 * 60 * 1000,
    max: 5, // login attempts
  },
};

Upload Configuration

// config/upload.config.ts
export const uploadConfig = {
  maxFileSize: 5 * 1024 * 1024, // 5MB
  allowedMimeTypes: [
    'image/jpeg',
    'image/png',
    'image/gif',
    'image/webp',
    'application/pdf',
  ],

  storage: {
    provider: 'supabase', // 'supabase' | 's3' | 'cloudinary'
    bucket: 'uploads',
  },
};

Environment-Specific Config

// config/app.config.ts
const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';

export const appConfig = {
  environment: process.env.NODE_ENV,
  apiUrl: isProd
    ? 'https://api.yourapp.com'
    : 'http://localhost:3000/api',

  features: {
    enableDebugTools: isDev,
    enableErrorReporting: isProd,
    enableAnalytics: isProd,
  },
};

Best Practices

Use environment variables for secrets
Type your configs for autocomplete and safety
Document options with comments
Validate on startup to catch errors early
Keep configs simple - avoid complex logic
Use feature flags for gradual rollouts
Environment-specific values for dev/prod differences

Loading Configuration

Configs are automatically loaded but you can validate:

// lib/config/validate-config.ts
import { z } from 'zod';

const ConfigSchema = z.object({
  apiUrl: z.string().url(),
  enableFeatureX: z.boolean(),
});

export function validateConfig(config: unknown) {
  return ConfigSchema.parse(config);
}