@hua-labs/i18n-core

// public/translations/ko/common.json
{
  "welcome": "안녕하세요",
  "greeting": "{{name}}님, 환영합니다!"
}

// public/translations/en/common.json
{
  "welcome": "Hello",
  "greeting": "Welcome, {{name}}!"
}

// app/layout.tsx (with hua)
import { HuaProvider } from '@hua-labs/hua/framework';
import { getSSRTranslations } from '@hua-labs/hua/framework/server';

const config = {
  i18n: {
    defaultLanguage: 'ko',
    supportedLanguages: ['ko', 'en'],
    namespaces: ['common'],
    translationLoader: 'static',
  },
};

export default async function RootLayout({ children }) {
  const initialTranslations = await getSSRTranslations(config, 'public/translations');

  return (
    <HuaProvider config={{ ...config, i18n: { ...config.i18n, initialTranslations } }}>
      {children}
    </HuaProvider>
  );
}

'use client';

import { useTranslation } from '@hua-labs/i18n-core';

function MyComponent() {
  const { t, currentLanguage } = useTranslation();

  return (
    <div>
      <h1>{t('common:welcome')}</h1>
      <p>{t('common:greeting', { name: 'User' })}</p>
      <p>Current: {currentLanguage}</p>
    </div>
  );
}

'use client';

import { useTranslation, useLanguageChange } from '@hua-labs/i18n-core';

function LanguageSelector() {
  const { currentLanguage } = useTranslation();
  const { changeLanguage, supportedLanguages } = useLanguageChange();

  return (
    <select
      value={currentLanguage}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {supportedLanguages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.nativeName || lang.name}
        </option>
      ))}
    </select>
  );
}