# Internationalization (i18n) Reference

All frontend text must use react-i18next. **Never hardcode user-facing strings.**

## Usage

```jsx
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('myFeature.title')}</h1>
      <p>{t('myFeature.description')}</p>
      <button>{t('common.save')}</button>
    </div>
  );
}
```

## With Parameters

```jsx
t('users.deleteConfirm', { name: user.name })
// de.json: "Benutzer {{name}} wirklich löschen?"
// en.json: "Really delete user {{name}}?"
```

## Locale Files

Add translations to BOTH files:

- `src/frontend/src/i18n/locales/de.json` — German (primary)
- `src/frontend/src/i18n/locales/en.json` — English

## Key Naming Convention

```json
{
  "featureName": {
    "title": "Page Title",
    "description": "Description text",
    "actions": {
      "save": "Save",
      "cancel": "Cancel"
    },
    "errors": {
      "notFound": "Not found"
    }
  }
}
```

## Common Keys

Check existing translations before adding new ones. Common patterns:
- `common.save`, `common.cancel`, `common.delete`, `common.edit`
- `common.loading`, `common.error`, `common.success`
- `common.confirm`, `common.back`, `common.close`

## Rules

- NEVER hardcode user-facing strings
- ALWAYS add to BOTH de.json and en.json
- German is the primary language (user's household)
- Use nested keys matching the feature name
- See `docs/MULTILANGUAGE.md` for full documentation
