DOCSEARCHbyAlgolia
Submit Docs

i18next-http-backend

repository·master·Indexed 19 days ago

https://github.com/i18next/i18next-http-backend

A backend plugin for i18next that enables loading translation resources from a remote server via HTTP. It supports Node.js (v18+), modern browsers, and Deno using the Fetch API or XMLHttpRequest. Version 4.0.1 requires a native fetch implementation or a provided ponyfill via alternateFetch.

Tokens
5.4K
Snippets
25
Records
27
Agent score
68%

What's inside i18next-http-backend

  2. Install i18next-http-backend via npm

    master

    Install the package using npm to use it in Node.js, the browser, or Deno.

    Note on v4 requirements: Version 4 requires a native fetch implementation (Node ≥ 18, modern browsers, Deno, or Bun). If you are on a runtime without native fetch, you must either provide a ponyfill via options.alternateFetch or use i18next-http-backend@3.

    $ npm install i18next-http-backend

  3. Initialize i18next-http-backend in different environments

    master

    Depending on your environment, use the following patterns to wire up the backend to i18next.

    Node.js / Bundlers

    import i18next from 'i18next';
import HttpApi from 'i18next-http-backend';

i18next.use(HttpApi).init(i18nextOptions);

    Deno

    import i18next from 'https://deno.land/x/i18next/index.js'
import Backend from 'https://deno.land/x/i18next_http_backend/index.js'

i18next.use(Backend).init(i18nextOptions);

    Plain Browser (via CDN)

    Include the script tag before your initialization code. If not using a module loader, the backend is added to window.i18nextHttpBackend.

    <script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@4/i18nextHttpBackend.min.js"></script>
<script>
  i18next.use(i18nextHttpBackend).init(i18nextOptions);
</script>
    import i18next from 'i18next';
import HttpApi from 'i18next-http-backend';

i18next.use(HttpApi).init(i18nextOptions);

  4. Use i18next-http-backend with Deno

    master

    To use i18next-http-backend in a Deno environment, you must import i18next and the HttpBackend module via their respective URLs. You then register the backend using i18next.use(HttpBackend) before calling .init().

    To fetch translations from a remote server, configure the backend.loadPath option. This path supports template variables like {{lng}} (language) and {{ns}} (namespace) to dynamically construct the URL for your JSON translation files.

    import i18next from 'https://deno.land/x/i18next/index.js'
import HttpBackend from 'https://raw.githubusercontent.com/i18next/i18next-http-backend/master/index.js'

i18next.use(HttpBackend).init({
  lng: 'en',
  fallbackLng: 'en',
  preload: ['en', 'de'],
  ns: ['translation'],
  defaultNS: 'translation',
  backend: {
    loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
  }
}, (err: Error, t: (...params: any[]) => string) => {
  if (err) return console.error(err)
  console.log(t('welcome'))
})

  5. Manage an Angular project with the Angular CLI

    master

    This project uses the Angular CLI for development and lifecycle management. Use the following commands to manage the application lifecycle:

    • Development: Run ng serve to start a local development server at http://localhost:4200/. The server supports automatic reloading on file changes.
    • Building: Run ng build to compile the project. The resulting artifacts are placed in the dist/ directory.
    • Unit Testing: Run ng test to execute unit tests using Karma.
    • End-to-End Testing: Run ng e2e to execute end-to-end tests (requires an installed E2E testing package).
    • Scaffolding: Use ng generate <type> <name> to create new files (e.g., components, services, modules).
    # Start development server
ng serve

# Build for production
ng build

# Run unit tests
ng test

# Run end-to-end tests
ng e2e

# Generate a new component
ng generate component component-name

  8. Configure I18nProvider for App Router

    master

    In the Next.js App Router, you configure the client-side lazy-loading by passing the ChainedBackend and its options to the I18nProvider within your layout file.

    // app/app-router/[locale]/layout.js
import { I18nProvider } from 'next-i18next/client'
import HttpBackend from 'i18next-http-backend'
import ChainedBackend from 'i18next-chained-backend'
import LocalStorageBackend from 'i18next-localstorage-backend'

// In the layout, pass the chained backend to I18nProvider:
<I18nProvider
  language={locale}
  resources={resources}
  use={[ChainedBackend]}
  i18nextOptions={{
    backend: {
      backends: [LocalStorageBackend, HttpBackend],
      backendOptions: [
        { expirationTime: isDev ? 0 : 60 * 60 * 1000 },
        {},
      ],
    },
  }}
>
  {children}
</I18nProvider>