How to initialize and configure i18next in a project?

Basic Initialization

i18next initialization is straightforward using the i18next.init() method:

javascript
import i18next from 'i18next';

i18next.init({
  lng: 'en', // default language
  debug: true, // enable debug mode in development
  resources: {
    en: {
      translation: {
        "key": "Hello World"
      }
    },
    zh: {
      translation: {
        "key": "你好世界"
      }
    }
  }
}, (err, t) => {
  if (err) {
    console.error('i18next initialization failed:', err);
    return;
  }
  // callback after initialization complete
  console.log(t('key')); // output: Hello World
});

Key Configuration Options

Language Related

• lng: Set default language (e.g., 'en', 'zh', 'fr')
• fallbackLng: Fallback language when translation doesn't exist
• supportedLngs: List of supported languages

javascript
i18next.init({
  lng: 'zh',
  fallbackLng: 'en',
  supportedLngs: ['en', 'zh', 'fr', 'de']
});

Resource Related

• resources: Define translation resources directly
• ns: Default namespace
• defaultNS: Default namespace to use

javascript
i18next.init({
  resources: {
    en: {
      translation: {
        "welcome": "Welcome"
      },
      common: {
        "save": "Save",
        "cancel": "Cancel"
      }
    }
  },
  ns: ['translation', 'common'],
  defaultNS: 'translation'
});

Interpolation Related

• interpolation: Configure interpolation behavior

javascript
i18next.init({
  interpolation: {
    escapeValue: false, // don't escape HTML
    format: function(value, format, lng) {
      if (format === 'uppercase') return value.toUpperCase();
      return value;
    }
  }
});

Detection Related

• detection: Language detection configuration

javascript
i18next.init({
  detection: {
    order: ['querystring', 'cookie', 'localStorage', 'navigator'],
    caches: ['localStorage', 'cookie'],
    lookupQuerystring: 'lng'
  }
});

Asynchronous Initialization

i18next.init() returns a Promise, can use async/await:

javascript
async function initI18n() {
  try {
    await i18next.init({
      lng: 'zh',
      resources: {
        zh: {
          translation: {
            "hello": "你好"
          }
        }
      }
    });
    console.log('i18next initialized successfully');
  } catch (error) {
    console.error('Initialization failed:', error);
  }
}

Best Practices

1. Separate Configuration: Put i18next configuration in a separate file
2. Environment Distinction: Use different configurations for development and production
3. Error Handling: Always handle initialization errors
4. Lazy Loading: Use lazy loading for large applications to improve performance
5. Type Safety: Use type definitions for TypeScript projects