Konfiguration

Hinweis: Dies sind Beispiel- bzw. Platzhalterinhalte zu Demonstrationszwecken.

Passen Sie das Verhalten Ihrer Anwendung über Konfigurationsdateien an.

Konfigurationsdateien

Alle Konfigurationsdateien befinden sich in apps/web/config/:

config/
├── paths.config.ts        # Routenpfade
├── billing.config.ts      # Abrechnung & Preise
├── feature-flags.config.ts # Feature-Schalter
├── personal-account-navigation.config.tsx
├── team-account-navigation.config.tsx
└── i18n.settings.ts       # Internationalisierung

Feature-Flags

Steuern Sie die Verfügbarkeit von Funktionen:

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

Feature-Flags verwenden

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

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

  return <ChatWidget />;
}

Pfadkonfiguration

Definieren Sie die Routen der Anwendung:

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

Pfade verwenden

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

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

Navigationskonfiguration

Navigation des persönlichen Kontos

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

Navigation des Teamkontos

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

Abrechnungskonfiguration

// 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, // unbegrenzt
        members: 10,
      },
    },
  ],
};

Internationalisierung

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

E-Mail-Konfiguration

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

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

  // Überschreibungen pro Seite
  pages: {
    home: {
      title: 'Home - Your App',
      description: 'Welcome to your app',
    },
    pricing: {
      title: 'Pricing - Your App',
      description: 'Simple, transparent pricing',
    },
  },
};

Theme-Konfiguration

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

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

Analytics-Konfiguration

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

Ratenbegrenzung

// config/rate-limit.config.ts
export const rateLimitConfig = {
  api: {
    windowMs: 15 * 60 * 1000, // 15 Minuten
    max: 100, // Anfragen pro Zeitfenster
  },

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

Upload-Konfiguration

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

Umgebungsspezifische Konfiguration

// 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. Umgebungsvariablen verwenden für Geheimnisse
2. Konfigurationen typisieren für Autovervollständigung und Sicherheit
3. Optionen dokumentieren mit Kommentaren
4. Beim Start validieren, um Fehler frühzeitig zu erkennen
5. Konfigurationen einfach halten – vermeiden Sie komplexe Logik
6. Feature-Flags verwenden für schrittweise Rollouts
7. Umgebungsspezifische Werte für Unterschiede zwischen Entwicklung und Produktion

Konfiguration laden

Konfigurationen werden automatisch geladen, Sie können sie jedoch validieren:

// 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);
}