Configuration

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>

Navigation Configuration

Personal Account Navigation

// 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" />,
  },
];

Team Account Navigation

// 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

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

Loading Configuration

Configs are automatically loaded but you can validate:

// lib/config/validate-config.ts
import * as z from 'zod';

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

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