JSON (i18next) Import

Azbox supports i18next JSON files, the most popular format for JavaScript/TypeScript applications including React, Vue, Angular, and Node.js projects.

What is i18next?

i18next is a widely-used internationalization framework for JavaScript. It uses simple JSON files to store translations, making it easy to manage and integrate with any frontend or backend project.

File Format

i18next JSON files are simple key-value pairs:

en.json

{
  "welcome": "Welcome to our app",
  "login": "Log In",
  "logout": "Log Out"
}

Nested Keys

i18next supports nested structures for organizing translations:

en.json

{
  "common": {
    "buttons": {
      "save": "Save",
      "cancel": "Cancel",
      "delete": "Delete"
    },
    "messages": {
      "success": "Operation completed",
      "error": "Something went wrong"
    }
  },
  "pages": {
    "home": {
      "title": "Home",
      "description": "Welcome to our platform"
    },
    "profile": {
      "title": "My Profile",
      "edit": "Edit Profile"
    }
  }
}

Automatic Flattening

Azbox automatically flattens nested keys using dot notation:

• common.buttons.save → "Save"
• pages.home.title → "Home"

Interpolation (Variables)

i18next uses double curly braces for variables:

{
  "greeting": "Hello, {{name}}!",
  "items": "You have {{count}} items in your cart",
  "price": "Total: {{currency}}{{amount}}"
}

Pluralization

{
  "item": "{{count}} item",
  "item_plural": "{{count}} items",
  "item_0": "No items"
}

Or using the newer v4 format:

{
  "item_one": "{{count}} item",
  "item_other": "{{count}} items",
  "item_zero": "No items"
}

Naming Conventions

Common filename patterns (locale is auto-detected):

Pattern	Example	Detected Locale
{locale}.json	en.json	en
{locale}-{region}.json	en-US.json	en-us
translation.{locale}.json	translation.es.json	es
{namespace}.{locale}.json	common.fr.json	fr

Quick Example

English (en.json):

{
  "nav": {
    "home": "Home",
    "about": "About Us",
    "contact": "Contact"
  },
  "hero": {
    "title": "Build amazing apps",
    "subtitle": "Start your journey today",
    "cta": "Get Started"
  },
  "footer": {
    "copyright": "© {{year}} Company Inc.",
    "privacy": "Privacy Policy"
  }
}

Spanish (es.json):

{
  "nav": {
    "home": "Inicio",
    "about": "Nosotros",
    "contact": "Contacto"
  },
  "hero": {
    "title": "Crea aplicaciones increíbles",
    "subtitle": "Comienza tu viaje hoy",
    "cta": "Empezar"
  },
  "footer": {
    "copyright": "© {{year}} Company Inc.",
    "privacy": "Política de Privacidad"
  }
}

How to Import in Azbox

Step 1: Open Import Dialog

Click Import in your project dashboard.

Step 2: Select Format

Choose JSON (i18next) from the File Format dropdown.

Step 3: Select Language

Pick the target language for your translations.

tip

Select one language at a time. You can import multiple files, but all will be assigned to the selected language.

Step 4: Click Import

Select your .json file(s) and confirm.

Step 5: Review Results

Azbox shows:

• ✅ Imported keywords count
• ⚠️ Warnings (arrays converted, locale detection issues)
• ❌ Errors (if any)

What Gets Imported

Content	Imported	Notes
String values	✅ Yes	Direct import
Nested objects	✅ Yes	Flattened with dot notation
Variables {{var}}	✅ Yes	Preserved as-is
Arrays	⚠️ Converted	Joined with commas
Numbers/booleans	⚠️ Converted	Cast to string

Best Practices

1. One language per file — Keep en.json, es.json, fr.json separate
2. Use namespaces — Organize with nested keys: common., errors., pages.
3. Consistent structure — Mirror the same key structure across all languages
4. Meaningful names — Use descriptive keys like checkout.confirmButton instead of btn1

Workflow Example

project/
├── locales/
│   ├── en.json     ← Import first (English)
│   ├── es.json     ← Import second (Spanish)
│   ├── fr.json     ← Import third (French)
│   └── de.json     ← Import fourth (German)

Import each file separately, selecting the matching language in Azbox each time.

Common Use Cases

React with react-i18next

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return <h1>{t('hero.title')}</h1>;
}

Vue with vue-i18n

<template>
  <h1>{{ $t('hero.title') }}</h1>
</template>

Next.js with next-i18next

import { useTranslation } from 'next-i18next';

export default function Home() {
  const { t } = useTranslation('common');
  return <h1>{t('hero.title')}</h1>;
}

---

Related

• ARB Import — For Flutter projects
• i18next Documentation