Migrating from react-i18next to AutoLocalise

This guide will help you transition your existing react-i18next implementation to AutoLocalise. The migration process is straightforward and can be done incrementally.

Key Differences

Migration Steps

1. Remove react-i18next dependencies

npm remove react-i18next i18next
# or
yarn remove react-i18next i18next

2. Install AutoLocalise

For React/Next.js applications:

npm install react-autolocalise
# or
yarn add react-autolocalise

3. Replace i18n initialization

Replace your i18n initialization code with AutoLocalise setup:

// Replace this:
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: require("./locales/en.json") },
    fr: { translation: require("./locales/fr.json") },
  },
  lng: "en",
  fallbackLng: "en",
});

// With this:
import { TranslationProvider } from "react-autolocalise";

const App = () => {
  return (
    <TranslationProvider
      config={{
        apiKey: "YOUR_API_KEY",
        sourceLocale: "en",
        targetLocale: "fr",
      }}
    >
      <YourApp />
    </TranslationProvider>
  );
};

4. Replace translation usage

Update your components to use AutoLocalise's translation hook, and use original copy text directly as we don't need key to string mapping:

// Replace this:
import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();
  return <p>{t("welcome_message")}</p>;
}

// With this:
import { useAutoTranslate } from "react-autolocalise";

function MyComponent() {
  const { t } = useAutoTranslate();
  return <p>{t("Welcome to our app!")}</p>;
}

5. Handle interpolation

AutoLocalise handles interpolation differently:

// Replace this:
t("greeting", { name: "John" }); // With { "greeting": "Hello, {{name}}" } in JSON

// With this:
t("Hello, {{1}}").replace("{{1}}", "John");

6. Remove translation files

You can safely remove your existing translation JSON files (locales/ directory) as AutoLocalise handles translations automatically.

Benefits After Migration

• No more manual translation file management
• Changes appear live without redeployments
• Automatic translation for new content
• Simplified codebase