How to support multiple languages in Replit apps

1# For React projects
2npm install i18next react-i18next i18next-browser-languagedetector
3
4# For Flask projects
5pip install Flask-Babel

1// src/locales/en.json
2{
3  "common": {
4    "welcome": "Welcome to our app",
5    "login": "Log In",
6    "signup": "Sign Up",
7    "logout": "Log Out"
8  },
9  "home": {
10    "title": "Home Page",
11    "description": "Build amazing things with our platform",
12    "cta": "Get Started"
13  },
14  "errors": {
15    "not_found": "Page not found",
16    "generic": "Something went wrong. Please try again."
17  }
18}
19
20// src/locales/es.json
21{
22  "common": {
23    "welcome": "Bienvenido a nuestra aplicacion",
24    "login": "Iniciar sesion",
25    "signup": "Registrarse",
26    "logout": "Cerrar sesion"
27  },
28  "home": {
29    "title": "Pagina principal",
30    "description": "Crea cosas increibles con nuestra plataforma",
31    "cta": "Comenzar"
32  },
33  "errors": {
34    "not_found": "Pagina no encontrada",
35    "generic": "Algo salio mal. Intentalo de nuevo."
36  }
37}

1// src/i18n.js
2import i18n from 'i18next';
3import { initReactI18next } from 'react-i18next';
4import LanguageDetector from 'i18next-browser-languagedetector';
5import en from './locales/en.json';
6import es from './locales/es.json';
7
8i18n
9  .use(LanguageDetector)
10  .use(initReactI18next)
11  .init({
12    resources: {
13      en: { translation: en },
14      es: { translation: es }
15    },
16    fallbackLng: 'en',
17    interpolation: {
18      escapeValue: false  // React already escapes
19    },
20    detection: {
21      order: ['localStorage', 'navigator'],
22      caches: ['localStorage']
23    }
24  });
25
26export default i18n;

1// src/components/HomePage.jsx
2import { useTranslation } from 'react-i18next';
3
4export default function HomePage() {
5  const { t } = useTranslation();
6
7  return (
8    <div>
9      <h1>{t('home.title')}</h1>
10      <p>{t('home.description')}</p>
11      <button>{t('home.cta')}</button>
12    </div>
13  );
14}

1// src/components/LanguageSwitcher.jsx
2import { useTranslation } from 'react-i18next';
3
4const languages = [
5  { code: 'en', label: 'English' },
6  { code: 'es', label: 'Espanol' }
7];
8
9export default function LanguageSwitcher() {
10  const { i18n } = useTranslation();
11
12  return (
13    <select
14      value={i18n.language}
15      onChange={(e) => i18n.changeLanguage(e.target.value)}
16      style={{ padding: '4px 8px', borderRadius: '4px' }}
17    >
18      {languages.map((lang) => (
19        <option key={lang.code} value={lang.code}>
20          {lang.label}
21        </option>
22      ))}
23    </select>
24  );
25}

1# app.py
2from flask import Flask, request, render_template
3from flask_babel import Babel, gettext as _
4
5app = Flask(__name__)
6app.config['BABEL_DEFAULT_LOCALE'] = 'en'
7app.config['BABEL_SUPPORTED_LOCALES'] = ['en', 'es', 'fr']
8
9def get_locale():
10    return request.accept_languages.best_match(
11        app.config['BABEL_SUPPORTED_LOCALES']
12    )
13
14babel = Babel(app, locale_selector=get_locale)
15
16@app.route('/')
17def home():
18    return render_template('index.html',
19        title=_('Welcome to our app'),
20        description=_('Build amazing things')
21    )