Site Configuration

Quick Reference

Configuration Structure

Complete Interface

interface SiteConfig {
  // Site Identity
  name: string              // Company/site name
  description: string       // Site description for metadata
  url: string              // Base URL for canonical links

  // Contact Information
  contact: {
    email?: string          // General contact
    privacyEmail?: string   // Privacy inquiries
    legalEmail?: string     // Legal inquiries
  }

  // Social Links
  links: {
    twitter?: string
    github?: string
    linkedin?: string
  }

  // Feature Toggles
  features: {
    cookieBanner: boolean   // Show/hide cookie consent banner
    analytics: boolean      // Enable PostHog analytics
    legalPages: {
      privacy: boolean      // Show privacy link in footer
      terms: boolean        // Show terms link in footer
      cookies: boolean      // Show cookies link in footer
    }
  }

  // SEO Configuration
  seo: {
    ogImage?: string        // Default Open Graph image
    twitterCard?: 'summary' | 'summary_large_image'
  }
}

Usage Patterns

Reading Configuration

import { getSiteConfig } from '@/config'

// In a component or page
const config = getSiteConfig()
console.log(config.name)  // "Your Company"

Conditional Rendering

const config = getSiteConfig()

// Feature toggle pattern
if (!config.features.cookieBanner) return null

// Conditional links
{config.features.legalPages.privacy && <Link href="/privacy">Privacy</Link>}

Environment Override

Environment variables take precedence over config file values:

# .env.local
NEXT_PUBLIC_SITE_NAME=Production Site
NEXT_PUBLIC_COOKIE_BANNER_ENABLED=false

Feature Toggles Reference

Adding New Configuration Options

1. Add to interface (src/config/types.ts):

export interface SiteConfig {
  // ... existing fields
  newOption: string
}

2. Add to config file (site.config.ts):

export const siteConfig: SiteConfig = {
  // ... existing values
  newOption: 'default value',
}

3. Add env override (optional, src/config/index.ts):

export function getSiteConfig(): SiteConfig {
  return {
    ...baseConfig,
    newOption: process.env.NEXT_PUBLIC_NEW_OPTION ?? baseConfig.newOption,
  }
}

4. Use in components:

const config = getSiteConfig()
// Use config.newOption

Anti-Patterns

Troubleshooting

Config Changes Not Reflected

Symptom: Changed site.config.ts but pages show old values

Cause: Next.js caching

Solution: Restart dev server or clear .next cache

Environment Override Not Working

Symptom: Set env var but config value unchanged

Checklist:

1. Variable starts with NEXT_PUBLIC_?
2. Variable in .env.local (not .env)?
3. Dev server restarted after adding env var?
4. Boolean values are exactly 'true' or 'false'?

TypeScript Errors in Config

Symptom: Type errors when editing site.config.ts

Solution: Ensure all required fields are present. Run pnpm typecheck to see specific errors.