TRW.AI #13 — i18n Language Routing
Multilingual Website • Route-Aware i18n
💡 Clue: Prompt Bolt to implement i18n translations
🔒 trw.ai/ en
Quick Routes:
TRW.AI
🌐

Our Services

Comprehensive AI solutions tailored to your business needs

Machine Learning Solutions

Custom ML models that learn from your data to predict outcomes, automate decisions, and unlock insights.

Natural Language Processing

Advanced NLP systems for chatbots, sentiment analysis, document processing, and language understanding.

Computer Vision

Image and video analysis solutions for object detection, facial recognition, and visual quality control.

AI Strategy Consulting

Expert guidance on AI adoption, implementation roadmaps, and organizational transformation.

Predictive Analytics

Data-driven forecasting models to anticipate trends, optimize operations, and reduce risks.

AI Integration

Seamless integration of AI capabilities into your existing systems and workflows.

html[lang]: en document.title: Our Services — TRW.AI canonical: https://trw.ai/en/services
hreflang: en, ru, es (x-default: en)
Project Explorer Vite + React
  • 📁 src/i18n
  • 📄 config.ts Core
  • 📁 locales/
  • 🌐 en.json EN
  • 🌐 ru.json RU
  • 🌐 es.json ES
  • 📁 src/components
  • ⚛️ LanguageRoute.tsx Routing
  • ⚛️ LanguageSwitcher.tsx UI
  • 📁 src/pages
  • ⚛️ ServicesPage.tsx Page
  • 📁 root
  • ⚛️ App.tsx Routes
📄 src/i18n/config.ts 

        

      

    


    
    

      

        
        

          ❌ The Naive Prompt (Shallow Trap)
          
"Add translations to my website"

          
What developers typically write when starting with Bolt.new. The AI generates client-side state disconnected from URL routing.

          
          
"Please add English, Russian, and Spanish translations to my website. Put a language switcher in the navbar so users can switch languages."


          

            

              ⚠️
              No URL Routing: Uses useState('en'). URL stays trw.ai/services without language prefix.
            

            

              ⚠️
              Broken Deep-Links: Sending a link to a Russian client opens the site in English default.
            

            

              ⚠️
              Zero SEO Indexing: Search engines cannot crawl localized versions because separate URLs do not exist.
            

            

              ⚠️
              Back Button Ignores Locale: Pressing browser Back leaves the website instead of reverting language.
            

          

        


        
        

          ✅ The Production Master Prompt (Route-Based)
          
"Route-Aware i18n Architecture"

          
The exact prompt that instructs Bolt to implement production-grade language routing, path preservation, and SEO tags.


          
Implement production-grade i18n language routing for our TRW.AI website using react-router-dom and i18next (or a typed JSON dictionary).

Requirements:
1. URL Route Structure:
   - All pages must be prefixed with the active locale: `/:lang/*` (e.g., `/en/services`, `/ru/services`, `/es/services`).
   - Root URL `/` must auto-detect browser language and redirect to `/:defaultLang/` (defaulting to 'en').
   - Valid locales: ['en', 'ru', 'es']. Invalid parameters must redirect to `/en`.

2. Route-Preserving Language Switcher:
   - Display a globe icon with [EN], [RU], [ES] segmented pill buttons.
   - When switching language, PRESERVE current subpath (e.g. from `/en/services` to `/ru/services`, NOT back to home).

3. Clean Dictionary Architecture:
   - Separate files: `src/i18n/locales/en.json`, `ru.json`, `es.json`.
   - Complete translations for all 6 AI service cards: Machine Learning, NLP, Computer Vision, AI Strategy, Predictive Analytics, AI Integration.

4. SEO & Metadata Synchronization:
   - Dynamically update document.title, <html lang="...">, and inject alternate <link rel="alternate" hreflang="..."> tags.


          

          

            

              ✨
              URL Single Source of Truth: Route defines active language deterministically.
            

            

              ✨
              Full Deep Linking: Direct links (e.g. #/ru/services) hydrate the Russian dictionary immediately.
            

            

              ✨
              100% SEO Friendly: Googlebot crawls each localized route with valid hreflang annotations.
            

          

        

      

    


    
    

      

        
        

          

            Trap 01
            🔗
          

          
Client Memory State vs URL Routing

          
Storing the active language in useState or localStorage hides the language from the URL. When users bookmark or share links, recipients get the wrong language, and browser Back/Forward navigation fails.

          

            The Architectural Fix: Bind the router directly to a /:lang/* parameter so the URL is always the authoritative source of truth.
          

        


        
        

          

            Trap 02
            🔄
          

          
The Infinite Root Redirect Loop

          
A naive root redirect reads navigator.language. If the user's browser is set to an unsupported language like German (de), redirecting to /de triggers a validation failure that redirects to /, causing an infinite loop.

          

            The Architectural Fix: Validate the detected browser locale against an explicit allowlist ['en', 'ru', 'es'] before redirecting, with hard fallback to en.
          

        


        
        

          

            Trap 03
            ⚡
          

          
Missing Key Cascades & FOUC

          
If a newly added service card exists in en.json but has not yet been translated in ru.json, naive i18n engines display raw bracketed keys like [services.vision.desc] or empty white space.

          

            The Architectural Fix: Configure fallback cascades so any missing key in secondary languages automatically falls back to the default English string.
          

        


        
        

          

            Trap 04
            🌐
          

          
SEO Canonical Duplication & hreflang

          
Search engine bots crawling /en/services, /ru/services, and /es/services treat them as duplicate content or rank the wrong language in regional search results without metadata.

          

            The Architectural Fix: Inject dynamic <link rel="alternate" hreflang="ru" ...> tags and self-referential canonical tags for each language route.
          

        


        
        

          

            Trap 05
            🔢
          

          
Slavic Morphological Pluralization

          
English uses binary pluralization (1 item vs N items). Russian uses three distinct grammatical forms depending on the last digit (1 решение, 2-4 решения, 5-20 решений). Simple ternary expressions fail miserably.

          

            The Architectural Fix: Use standard CLDR plural categories (_one, _few, _many) in locale JSON dictionaries.
          

        

      

    


    
    

      

        

          

            
Interactive Translation Dictionary Editor

            
Edit any string below in real time. Changes immediately update the live TRW.AI preview in Tab 1!

          

          

            
            
            
            
          

        


        

          
            

              Translation Key
              Localized Value (Editable)
            

          
          
            
          
        

      

    


  


  
  

    ✅
    Notification