Configuration Reference

Complete configuration reference for the AI Store application.

Next.js Configuration

next.config.ts

const nextConfig: NextConfig = {
  // Compression
  compress: true,
  
  // Security
  poweredByHeader: false,
  
  // Image Optimization
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60,
  },
  
  // Experimental Features
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['@/components'],
  },
  
  // Headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
          // ... more headers
        ],
      },
    ];
  },
};

Environment Variables

Required

# Site URL
NEXT_PUBLIC_SITE_URL=https://your-domain.com

Optional

# Analytics
NEXT_PUBLIC_ANALYTICS_ID=your-id

# Feature Flags
NEXT_PUBLIC_ENABLE_DEV_TOOLS=false
NEXT_PUBLIC_ENABLE_ANALYTICS=true

# API Endpoints
NEXT_PUBLIC_API_URL=https://api.your-domain.com

Feature Flags

Configuration

Edit lib/feature-flags.ts:

export const featureFlags: Record<string, boolean> = {
  devTools: process.env.NEXT_PUBLIC_ENABLE_DEV_TOOLS === 'true',
  analytics: process.env.NEXT_PUBLIC_ENABLE_ANALYTICS !== 'false',
  // Add more flags
};

Usage

import { useFeatureFlag } from '@/hooks/useFeatureFlag';

function MyComponent() {
  const enabled = useFeatureFlag('myFeature');
  return enabled ? <NewFeature /> : <OldFeature />;
}

i18n Configuration

Supported Locales

Edit lib/i18n.ts:

export type Locale = 'en' | 'de' | 'fr' | 'es' | 'it';

// Add more locales
export type Locale = 'en' | 'de' | 'fr' | 'es' | 'it' | 'pt' | 'ja';

Adding Translations

import { i18n } from '@/lib/i18n';

i18n.addTranslations('pt', {
  common: {
    loading: 'Carregando...',
    error: 'Erro ocorreu',
  },
});

Caching Configuration

API Cache

import { apiCache } from '@/lib/api-cache';

// Configure default TTL
apiCache.setDefaultTTL(5 * 60 * 1000); // 5 minutes

Advanced Cache

import { advancedCache } from '@/lib/advanced-cache';

// Use in data fetching
const data = await advancedCache.get('key', fetcher, {
  strategy: 'stale-while-revalidate',
  ttl: 60000,
  staleWhileRevalidate: 300000,
});

Performance Budgets

Configuration

Edit lib/performance-budget.ts:

export const defaultBudgets: PerformanceBudget[] = [
  {
    name: 'First Contentful Paint',
    metric: 'FCP',
    threshold: 1800,
    unit: 'ms',
  },
  // Add more budgets
];

Analytics Configuration

Basic Setup

import { advancedAnalytics } from '@/lib/analytics-advanced';

// Identify user
advancedAnalytics.identify('user-id', {
  email: 'user@example.com',
  name: 'User Name',
});

Custom Events

advancedAnalytics.trackEvent({
  name: 'custom_event',
  category: 'interaction',
  label: 'Button Click',
  value: 1,
  properties: {
    page: '/home',
  },
});

Error Handling Configuration

Error Recovery Strategies

import { errorRecovery } from '@/lib/error-recovery';

errorRecovery.register({
  name: 'custom-recovery',
  priority: 10,
  canRecover: (error) => {
    return error.message.includes('custom-error');
  },
  recover: async () => {
    // Recovery logic
  },
});

Error Logging

import { errorLogger } from '@/lib/error-logger';

errorLogger.log(error, 'high', {
  context: 'component',
  userId: 'user-id',
});

Security Configuration

Security Headers

Configure in next.config.ts:

async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: "default-src 'self'; script-src 'self' 'unsafe-inline';",
        },
        {
          key: 'X-Frame-Options',
          value: 'DENY',
        },
        // ... more headers
      ],
    },
  ];
}

Rate Limiting

import { rateLimiter } from '@/lib/rate-limit';

const result = rateLimiter.check('user-id', 100, 60000);
// 100 requests per 60 seconds

PWA Configuration

Manifest

Edit public/manifest.json:

{
  "name": "AI Store",
  "short_name": "AI Store",
  "description": "AI-powered applications",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Service Worker

Configure in public/sw.js:

const CACHE_NAME = 'ai-store-v1';
const urlsToCache = [
  '/',
  '/offline',
  // Add more URLs
];

Search Configuration

Search Options

import { searchApps } from '@/lib/search';

const results = searchApps(apps, query, {
  threshold: 0.3, // Match threshold
  limit: 50,       // Max results
  fuzzy: true,     // Enable fuzzy matching
});

Advanced Search

import { advancedSearch } from '@/lib/advanced-search';

const results = advancedSearch(apps, {
  query: 'search term',
  filters: {
    tags: ['productivity'],
    minRating: 4,
  },
  sortBy: 'rating',
  limit: 20,
});

Notification Configuration

Notification Service

import { notifications } from '@/lib/notifications';

// Configure max notifications
notifications.maxNotifications = 5;

// Show notification
notifications.success('Success!', 'Operation completed');

Keyboard Shortcuts

Register Shortcuts

import { keyboardShortcuts } from '@/lib/keyboard-shortcuts';

keyboardShortcuts.register({
  key: 'k',
  ctrl: true,
  action: () => {
    // Action
  },
  description: 'Open search',
});

Monitoring Configuration

Performance Monitoring

import { monitoring } from '@/lib/monitoring';

monitoring.recordMetric({
  name: 'api_response_time',
  value: 150,
  unit: 'ms',
});

State Persistence

Configuration

import { statePersistence } from '@/lib/state-persistence';

// Save with options
statePersistence.save('key', value, {
  storage: 'localStorage',
  version: 1,
  serialize: JSON.stringify,
  deserialize: JSON.parse,
});

Image Optimization

Configuration

import { getOptimizedImageUrl } from '@/lib/image-optimization';

const url = getOptimizedImageUrl('/image.jpg', {
  width: 800,
  height: 600,
  quality: 80,
  format: 'webp',
});

Routing Configuration

Route Guards

import { routeGuards } from '@/lib/routing-advanced';

routeGuards.registerGuard('/protected', {
  canActivate: () => {
    return isAuthenticated();
  },
  redirectTo: '/login',
  message: 'Please log in',
});

Development Tools

Enable Dev Tools

NEXT_PUBLIC_ENABLE_DEV_TOOLS=true

Keyboard Shortcut

Press Ctrl+Shift+D to toggle dev tools.

Customization

Theme Colors

Edit app/globals.css:

:root {
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  /* Add more colors */
}

Fonts

Edit app/layout.tsx:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

Best Practices

1. Environment Variables: Never commit .env files
2. Feature Flags: Use flags for gradual rollouts
3. Configuration: Keep configs in separate files
4. Documentation: Document all configurations
5. Testing: Test with different configurations

Troubleshooting

Configuration Not Working

1. Check environment variables
2. Verify configuration files
3. Clear cache and rebuild
4. Check console for errors

Performance Issues

1. Review performance budgets
2. Check caching configuration
3. Verify image optimization
4. Review bundle size