Shoplit
Getting Started

Internationalization (i18n)

Learn how Shoplit handles internationalization (i18n) with built-in configuration, language settings, translation files, and formatting utilities.

Overview

Shoplit offers integrated support for internationalization (i18n), enabling your application to display locale-specific content—including formatted dates, times, and currencies—while also facilitating language management and time zone support.

Configuration

Next.js Integration

The Next.js configuration is set up in the shoplit/next.config.ts file. This file imports the custom i18n configuration required by the application.

import { i18n } from './next-i18next.config';
 
module.exports = {
  i18n,
};

i18n Configuration

The i18n configuration is defined in a dedicated configuration file. This file sets the default locale and explicitly lists all supported locales for the application.

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ar', 'es', 'de', 'ch'],
  },
  reloadOnPrerender: true,
};

Note: The reloadOnPrerender setting ensures that translation files are reloaded automatically during development when changes are detected.

Language Settings

The language settings are established in shoplit/i18n/config.ts. This file defines the metadata for each language, including its code, display name, text direction, and corresponding flag icon.

export interface Language {
	code: string;
	name: string;
	shortName: string;
	direction: 'ltr' | 'rtl';
	flag: string;
}
 
export const languages: Language[] = [
	{
		code: 'en',
		name: 'English',
		shortName: 'EN',
		direction: 'ltr',
		flag: '/media/flags/united-states.svg',
	},
	{
		code: 'ar',
		name: 'Arabic',
		shortName: 'AR',
		direction: 'rtl',
		flag: '/media/flags/saudi-arabia.svg',
	},
	{
		code: 'es',
		name: 'Spanish',
		shortName: 'ES',
		direction: 'ltr',
		flag: '/media/flags/spain.svg',
	},
	{
		code: 'de',
		name: 'German',
		shortName: 'DE',
		direction: 'ltr',
		flag: '/media/flags/germany.svg',
	},
	{
		code: 'ch',
		name: 'Chinese',
		shortName: 'CH',
		direction: 'ltr',
		flag: '/media/flags/china.svg',
	},
];

Translation Files

Translation strings are stored as JSON files in the shoplit/i18n/messages folder. Each file corresponds to a specific locale.

English Translations

{
  "common": {
    "enums": {
      "category_status": {
        "active": "Active",
        "inactive": "Inactive"
      }
    },
    "messages": {
      "unauthorized": "Unauthorized access.",
      "system_error": "An error occurred. Please try again later.",
      "invalid_input": "Invalid input. Please review your data and try again.",
      "data_not_found": "Requested data not found.",
      "delete_restricted_error": "Unable to delete this record as it is linked to other records."
    },
    "confirm-dimiss-dialog": {
      "title": "Discard changes?",
      "description": "You have unsaved changes. Are you sure you want to close this dialog?",
      "cancel": "Cancel",
      "confirm": "Discard changes"
    }
  },
  "components": {
    "data-grid": {
      "empty": {
        "title": "No data",
        "description": "No data available to display."
      }
    }
  },
  "modules": {
    "categories": {
      "meta": {
        "title": "Categories"
      },
      "list": {
        // ... additional keys for the categories module ...
      }
    }
  }
}

Using Translations in Components

Within your React components, use the useTranslation hook to access localized strings. For example:

import { useTranslation } from 'next-i18next';
 
const MyComponent = () => {
  const { t } = useTranslation('common');
 
  return (
    <div>
      <p>{t('messages.system_error')}</p>
    </div>
  );
};
 
export default MyComponent;

Tip: Use dot notation (e.g., messages.system_error) to access nested translation keys. The provided namespace (such as 'common') corresponds to the top-level key in the JSON translation files.

Formatting Utilities

Shoplit provides utility functions for localized formatting of dates, times, and currencies in shoplit/i18n/format.ts.

Date and Time Formatting

  • formatDate(date) – Formats a date in a localized style (e.g., "Dec 7, 2024").
  • formatDateTime(date) – Formats a date and time together (e.g., "Dec 7, 2024, 11:41 PM").
  • formatTime(date) – Formats only the time (e.g., "11:41 PM").

Example usage:

import { formatDate, formatMoney } from 'shoplit/i18n/format';
 
const dateString = formatDate(new Date());
const price = formatMoney(100); // Defaults to USD, or you can specify another currency if needed

Currency Formatting

  • formatMoney(amount, currency?) – Converts a numeric value to a localized currency string. The default currency is USD, but a different currency can be specified.

Time Zones Utility

The helper in shoplit/i18n/timezones.ts provides a list of supported time zones. Each timezone object includes a label (combining the GMT offset and the name), a unique value, and an offset for sorting.

import { getTimeZones } from 'shoplit/i18n/timezones';
 
// Retrieve the formatted list of supported time zones
const timeZones = getTimeZones();
PreviousDeploymentNextRouting