Lovablefeatureadvanced
Add Multi-Language Support to Lovable App
Add internationalization with language switcher, RTL support, and hreflang tags for SEO.
What you'll get
A multi-language app with language switcher, RTL support, hreflang SEO tags, and locale-aware formatting.
The Prompt
Add multi-language support (i18n) to my Lovable app.
REQUIREMENTS:
1. Create a translation system using JSON files for each language. Start with English (en) and one additional language. Structure: { "nav.home": "Home", "nav.about": "About", ... }
2. Create a useTranslation hook that returns a t() function for translating keys and a locale state.
3. Add a language switcher dropdown in the navbar showing language name and flag emoji. Store selected language in localStorage.
4. Wrap all user-facing strings in the t() function. Never hardcode display text.
5. Handle RTL languages (Arabic, Hebrew) by adding dir="rtl" to <html> and flipping layout with CSS logical properties (margin-inline-start instead of margin-left).
6. Add hreflang link tags in the document head for each supported language for SEO.
7. Format dates, numbers, and currencies using Intl APIs based on the active locale.
8. Support pluralization rules for different languages.
DATABASE:
- No new tables. Translations stored as JSON files.
- Optionally store user language preference in the profiles table.
SECURITY:
- Sanitize translation strings to prevent XSS.
- Validate locale parameter to prevent directory traversal.Replace these variables
| Variable | Replace with |
|---|---|
| [LANGUAGES] | Languages to support (e.g., en, es, fr, ar) |
| [DEFAULT_LOCALE] | Default language code (e.g., en) |
Tips for best results
Start with just 2 languages to get the system right, then add more later.
Use ICU message format for complex pluralization instead of simple string replacement.
Test RTL layout thoroughly — it often breaks navigation and form layouts.
Follow-up prompts
Add AI translation
Add an admin page that uses OpenAI to auto-translate all English strings into the target language. Allow manual review and editing before publishing.
Add locale routing
Add URL-based locale routing (/en/about, /es/about) with automatic redirect based on browser Accept-Language header.