# Multi-Locale Support

The theme supports multiple locales with automatic detection and URL-based switching.

## Locale Detection

The middleware detects locale from the URL and passes it to the app via headers:

- Default locale has no URL prefix: `/products`
- Non-default locales have prefix: `/sv/produkter`, `/en/products`

## Using Locale in Components

### Server Components

```tsx
import { getLocale } from '@/lib/locale';

export default async function ServerComponent() {
  const locale = await getLocale();
  // Use locale for fetching, caching, etc.
}
```

### Client Components

```tsx
'use client';

import { useLocale } from '@/lib/context-providers/locale-context';

export function ClientComponent() {
  const { locale } = useLocale();
  // Use locale for client-side logic
}
```

## Locale Switcher

The `LocaleSwitcher` component allows users to change languages:

```tsx
// components/layout/locale-switcher.tsx
import { LocaleSwitcher } from '@/components/layout/locale-switcher';

export function Header() {
  return (
    <header>
      <LocaleSwitcher />
    </header>
  );
}
```

## Locale Configuration

Configure available locales in your locale configuration:

```tsx
// lib/locale.ts
export const locales = ['en', 'sv', 'fi'];
export const defaultLocale = 'en';
```

## URL Structure

The theme uses URL prefixes for non-default locales:

- English (default): `/products`
- Swedish: `/sv/produkter`
- Finnish: `/fi/tuotteet`

The middleware automatically:
1. Detects the locale from the URL
2. Strips the locale prefix before routing
3. Passes the locale to components via headers/context

## Data Fetching with Locale

Always pass the locale when fetching data:

```tsx
import { getLocale } from '@/lib/locale';
import { storefrontClient, withLocale, cachePresets } from '@/lib/storefront';

export default async function ServerComponent() {
  const locale = await getLocale();
  
  const result = await storefrontClient.query(
    PRODUCTS_QUERY,
    {},
    withLocale(locale, cachePresets.products)
  );
  
  return <div>{/* ... */}</div>;
}
```

## Locale-Aware Components

Components can access locale information:

```tsx
'use client';

import { useLocale } from '@/lib/context-providers/locale-context';

export function ProductPrice({ amount, currency }) {
  const { locale } = useLocale();
  
  return (
    <div>
      {new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currency,
      }).format(amount)}
    </div>
  );
}
```

## Best Practices

1. **Always use locale** - Pass locale to all API calls
2. **Cache per locale** - Use locale-aware caching
3. **Test all locales** - Verify behavior in each locale
4. **Handle missing translations** - Provide fallbacks
5. **Use locale in formatting** - Dates, numbers, currencies

## Next Steps

- [Data Fetching](./data-fetching) - Learn about API integration
- [Architecture](./architecture) - Understand locale detection flow
- [Templates](./templates) - Use locale in templates