sfnext-i18n

name	sfnext-i18n
description	Implement internationalization in Storefront Next using i18next with useTranslation for components and getTranslation for server-side code. Use when adding translations, configuring locales, handling pluralization, using the Zod schema factory pattern, or managing extension translations. Covers namespaces, interpolation, and language switching.

Internationalization (i18n) Skill

This skill covers internationalization in Storefront Next using i18next with a dual-instance architecture (server + client).

Overview

• Server instance — Has access to all translations for all languages
• Client instance — Dynamically imports translations as JavaScript chunks
• Dual API — useTranslation() for components, getTranslation() for non-component code

Translation File Structure

Translations are organized as namespace files per locale, compiled into a TypeScript index:

src/locales/en-US/
├── index.ts              # Merges all namespace files + extensions
├── translations.json     # Default namespace (top-level keys become namespaces)
└── product.json          # "product" namespace (separate file)

src/locales/en-GB/
├── index.ts
├── translations.json
└── product.json

The index.ts imports all namespace files and extension translations:

import translations from '@/locales/en-US/translations.json';
import product from '@/locales/en-US/product.json';
import extensionTranslations from '@/extensions/locales/en-US/';

 allTranslations = { ...translations, product, ...extensionTranslations };
  allTranslations  ;