i18next-http-backend VS i18next

Compare i18next-http-backend vs i18next and see what are their differences.

i18next-http-backend

i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno. (by i18next)
Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
i18next-http-backend i18next
4 46
297 6,610
4.7% 1.6%
8.5 9.5
about 1 month ago 22 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

i18next-http-backend

Posts with mentions or reviews of i18next-http-backend. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-05-15.
  • How to properly internationalize a Vue application using i18next
    8 projects | dev.to | 15 May 2022
    import i18next from 'i18next' import I18NextVue from 'i18next-vue' import LanguageDetector from 'i18next-browser-languagedetector' import Backend from 'i18next-http-backend' export const i18nextPromise = i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en' }); export default function (app) { app.use(I18NextVue, { i18next }) return app }
  • The progressive guide to jQuery internationalization (i18n) using i18next
    8 projects | dev.to | 2 Feb 2022
    // ... $(function () { // use plugins and options as needed, for options, detail see // https://www.i18next.com i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(i18nextHttpBackend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(i18nextBrowserLanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en' }, (err, t) => { if (err) return console.error(err); // ... }); });
  • How to Internationalize a React App
    8 projects | dev.to | 2 Sep 2021
    In addition, we need to install i18next-http-backend which allows us to fetch translations from a directory, and i18next-browser-languagedetector which allows us to detect the user's language:
  • How to properly internationalize a React application using i18next
    12 projects | dev.to | 14 Apr 2021
    import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-http-backend'; import { DateTime } from 'luxon'; i18n // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, resources: { en: { translation: { description: { part1: 'Edit <1>src/App.js and save to reload.', part2: 'Learn React' }, counter: 'Changed language just once', counter_plural: 'Changed language already {{count}} times', footer: { date: 'Today is {{date, DATE_HUGE}}', date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!', date_afternoon: 'Good afternoon! It\'s {{date, DATE_HUGE}}', date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}' } } }, de: { translation: { description: { part1: 'Ändere <1>src/App.js und speichere um neu zu laden.', part2: 'Lerne React' }, counter: 'Die Sprache wurde erst ein mal gewechselt', counter_plural: 'Die Sprache wurde {{count}} mal gewechselt', footer: { date: 'Heute ist {{date, DATE_HUGE}}', date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | Wünsche einen schönen Tag!', date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}', date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}' } } } } }); export default i18n;

i18next

Posts with mentions or reviews of i18next. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-01-25.
  • 20 Best Libraries and Tools for React Developers
    11 projects | dev.to | 25 Jan 2023
    i18next is a very popular internationalization framework for browsers or any other javascript environment.
  • Learnings building a game in React + Electron
    2 projects | reddit.com/r/gamedev | 3 Jan 2023
    Translations that are dynamic was a big system I wanted to start implementing from the start. I knew it can be annoying to go back and integrate translations. Luckily, with react and node, we get the use of libraries to make this really easy. I used i18next which made dynamic translations really easy with react hooks. Basically you setup a bunch of JSON files for each language you want and than use a key/pair value for retrieving specific words/sentences. The library has a function to switch the language anywhere, making it really easy to do. Basically, for my content, instead of storing names, I store the keys to the translations, making it easy to translate. I also have a dud value on each item that makes looking through the items not too bad. At the start of the game, users just select their language and it all works real nice.
  • Managing translations
    4 projects | reddit.com/r/reactnative | 21 Dec 2022
    Are you using TypeScript? It helps me a lot when doing it with local json-files, because you can’t make reference mistakes really. Also, i18next is pretty great 👍
  • i18n with Next.js 13 and app directory
    5 projects | dev.to | 8 Dec 2022
    In this section you'll see how we can internationalize the new app directory with the use of i18next, react-i18next and i18next-resources-to-backend. npm install i18next react-i18next i18next-resources-to-backend
  • Svelte community needs to focus more on the ecosystem than the framework itself.
    6 projects | reddit.com/r/sveltejs | 12 Nov 2022
    For i18n I used i18next. Here's how I integrated it: https://svelte.dev/repl/c9e87632ada543c8a0780ae8ac603441?version=3.53.1
  • How To Add Multiple Language Support In ReactJS
    4 projects | dev.to | 5 Oct 2022
    Now inside tag add onChange method, this is where we get values from options provided and pass it to i18n to change language i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English Enter fullscreen mode Exit fullscreen mode Final App.js import logo from './logo.svg'; import './App.css'; import { useTranslation } from 'react-i18next'; function App() { const { t, i18n } = useTranslation() return (
    logo

    Edit src/App.js and save to reload.

    i18n.changeLanguage(e.target.value)}> Choose language Uzbek Russian English {t('welcome')}
    {t('goodbye')}
    ); } export default App; Enter fullscreen mode Exit fullscreen mode Result Translation optimization Step 1: Now, did you noticed our translations are located inside i18n.js file. We haven't yet started splitting translations into multiple files (which is highly recommended for larger projects) but we already see that adding more languages would result in bundling unneeded translations into the application. In order to separate our translation we will use package namely i18next-http-backend, which helps us to load our translations asynchronously. Install i18next-http-backend by running this code on terminal npm install i18next-http-backend Enter fullscreen mode Exit fullscreen mode Now we need to wire up i18next-http-backend into our i18n.js file import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import backend from "i18next-http-backend"; // <--- import here i18n .use(initReactI18next) // passes i18n down to react-i18next .use(backend) // <--- wire up here .init({ // the translations // (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) resources: { uz: { translation: { welcome: "Xush kelibsiz", goodbye: "Xayr" } }, ru: { translation: { welcome: "Добро пожаловать", goodbye: "До свидания" } }, en: { translation: { welcome: "Welcome", goodbye: "Goodbye" } } }, lng: "en", // if you're using a language detector, do not define the lng option fallbackLng: "en", interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape } }); Enter fullscreen mode Exit fullscreen mode Once we connected i18next-http-backend, by default it will load translation from this path '../public/locales/{lang}/translation.json' Enter fullscreen mode Exit fullscreen mode This path considered to be the default for the i18next-http-backend to load from. Step 2: We need to create this path locales/{lang}/translation.json inside public folder. Now we need to remove this part of code from i18n.js file And add our translations inside translation.json file for each language. UZ RU EN Now check result on browser Final Result Link to full source of tutorial here Reference list i18next React.i18next Locize Geeksforgeeks Legacy-v9
  • Criticizing Svelte - Low Hanging Fruit
    6 projects | reddit.com/r/sveltejs | 9 Sep 2022
    I'm using i18next. Someone has also written a svelte store wrapper for it: https://github.com/NishuGoel/svelte-i18next. It wasn't completely easy to get set up the way I wanted but it did the trick in the end and it is a widely used library that's not likely to be abandoned any time soon.
  • How to set HTML lang attribute in Next.js
    2 projects | dev.to | 6 Sep 2022
    You only need to change the i18n (i18next) property inside the next configuration file
  • Best internationalization for Gatsby
    8 projects | dev.to | 9 Aug 2022
    There are some plugins/libraries that may help instrumenting the Gatsby code for internationalization. In this article we will use a plugin based on the famous i18n framework i18next, respectively its great extension for React.js - react-i18next. The Gatsby plugin we're using is gatsby-plugin-react-i18next created by Dmitriy Nevzorov.
  • Internationalization with ReactJS and i18n
    3 projects | dev.to | 1 Jul 2022
    import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from "i18next-browser-languagedetector"; i18n // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: "en", interpolation: { escapeValue: false, // not needed for react as it escapes by default }, resources: { en: { translation: { title: "i18n React project", english: "English", spanish: "Spanish", }, }, es: { translation: { title: "Proyecto i18n en React", english: "Ingles", spanish: "Español", }, }, }, }); export default i18n;

What are some alternatives?

When comparing i18next-http-backend and i18next you can also consider the following projects:

React Intl - The monorepo home to all of the FormatJS related libraries, most notably react-intl.

polyglot - Give your JavaScript the ability to speak many languages.

jsLingui - 🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript

react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.

deepl-translator - This module provides promised methods for translating text using DeepL Translator (https://www.deepl.com/translator) undocumented API.

MJML - MJML: the only framework that makes responsive-email easy

aws-lambda-fastify - Insipired by aws-serverless-express to work with Fastify with inject functionality.

i18n-node - Lightweight simple translation module for node.js / express.js with dynamic json storage. Uses common __('...') syntax in app and templates.

transloco - 🚀 😍 The internationalization (i18n) library for Angular

babelfish - human friendly i18n for javascript (node.js + browser)

Luxon - ⏱ A library for working with dates and times in JS

ttag - :orange_book: simple approach for javascript localization