JavaScript localization, the i18next way.

npm install i18next react-i18next i18next-browser-languagedetector i18next-locize-backend

import i18n from 'i18next'
import { initReactI18next, useTranslation } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-locize-backend'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    saveMissing: true, // sends new keys to Locize
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]', // dev only — drop in production
    }
  })

// In a component:
function Welcome () {
  const { t } = useTranslation()
  return <h1>{t('welcome.title', 'Welcome')}</h1>
}

npm install next-i18next i18next react-i18next i18next-locize-backend

// i18n.config.ts — works for App Router, Pages Router, or both
import { defineConfig } from 'next-i18next'
import LocizeBackend from 'i18next-locize-backend'

export default defineConfig({
  supportedLngs: ['en', 'de'],
  fallbackLng: 'en',
  use: [LocizeBackend],
  i18nextOptions: {
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]', // dev only — drop in production
      referenceLng: 'en'
    },
    saveMissing: true // sends new keys to Locize
  }
})

// In a Server Component:
//   const { t } = await getT('common')
// In a Client Component:
//   const { t } = useT('common')
// Full App Router setup (proxy + layout) in the linked guide.

npm install i18next i18next-vue i18next-locize-backend

import { createApp } from 'vue'
import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import Backend from 'i18next-locize-backend'
import App from './App.vue'

await i18next
  .use(Backend)
  .init({
    fallbackLng: 'en',
    saveMissing: true,
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]'
    }
  })

createApp(App).use(I18NextVue, { i18next }).mount('#app')

// In a template:
// <h1>{{ $t('welcome.title') }}</h1>

npm install i18next angular-i18next i18next-locize-backend

import { APP_INITIALIZER, NgModule } from '@angular/core'
import { I18NextModule, ITranslationService, I18NEXT_SERVICE } from 'angular-i18next'
import LocizeBackend from 'i18next-locize-backend'

const i18nextInit = (i18next: ITranslationService) => () =>
  i18next
    .use(LocizeBackend)
    .init({
      fallbackLng: 'en',
      saveMissing: true,
      backend: {
        projectId: '[PROJECT_ID]',
        apiKey: '[API_KEY]'
      }
    })

@NgModule({
  imports: [I18NextModule.forRoot()],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: i18nextInit,
    deps: [I18NEXT_SERVICE],
    multi: true
  }]
})
export class AppModule {}

npm install i18next i18next-locize-backend

// src/i18n.js
import i18next from 'i18next'
import Backend from 'i18next-locize-backend'
import { writable } from 'svelte/store'

export const t = writable((k) => k)
export const lng = writable('en')

i18next
  .use(Backend)
  .init({
    fallbackLng: 'en',
    saveMissing: true,
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]'
    }
  }, () => {
    t.set(i18next.t.bind(i18next))
    lng.set(i18next.language)
  })

// In a component:
// import { t } from './i18n.js'
// <h1>{$t('welcome.title')}</h1>

npm install i18next i18next-locize-backend

import i18next from 'i18next'
import Backend from 'i18next-locize-backend'

await i18next
  .use(Backend)
  .init({
    fallbackLng: 'en',
    saveMissing: true,
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]'
    }
  })

console.log(i18next.t('welcome.title'))
// Works the same in browser and Node.js.