1// hua.config.ts
2import { defineConfig } from '@hua-labs/hua/framework/config';
3 
4export default defineConfig({
5  i18n: {
6    defaultLanguage: 'ko',
7    supportedLanguages: ['ko', 'en', 'ja'],
8    namespaces: ['common', 'home', 'about'],
9    translationLoader: 'api', // or 'static'
10  },
11});

1// app/api/translations/[language]/[namespace]/route.ts
2import { NextResponse } from "next/server";
3import fs from "fs";
4import path from "path";
5 
6export async function GET(
7  request: Request,
8  { params }: { params: Promise<{ language: string; namespace: string }> }
9) {
10  const { language, namespace } = await params;
11 
12  const filePath = path.join(
13    process.cwd(),
14    "public/translations",
15    language,
16    `${namespace}.json`
17  );
18 
19  try {
20    const content = fs.readFileSync(filePath, "utf-8");
21    return NextResponse.json(JSON.parse(content));
22  } catch {
23    return NextResponse.json({}, { status: 404 });
24  }
25}

1// public/translations/ko/common.json
2{
3  "nav": {
4    "home": "홈",
5    "about": "소개",
6    "contact": "문의"
7  },
8  "greeting": "안녕하세요, {{name}}님!"
9}
10 
11// public/translations/en/common.json
12{
13  "nav": {
14    "home": "Home",
15    "about": "About",
16    "contact": "Contact"
17  },
18  "greeting": "Hello, {{name}}!"
19}

1'use client';
2 
3import { useTranslation, useLanguageChange } from '@hua-labs/hua';
4 
5export function MyComponent() {
6  const { t, currentLanguage } = useTranslation();
7  const { changeLanguage, supportedLanguages } = useLanguageChange();
8 
9  return (
10    <div>
11      <h1>{t('common:nav.home')}</h1>
12      <p>{t('common:greeting', { name: 'HUA' })}</p>
13 
14      <div className="flex gap-2">
15        {supportedLanguages.map((lang) => (
16          <button
17            key={lang.code}
18            onClick={() => changeLanguage(lang.code)}
19            className={currentLanguage === lang.code ? 'font-bold' : ''}
20          >
21            {lang.nativeName}
22          </button>
23        ))}
24      </div>
25    </div>
26  );
27}

1// getRawValue: 배열/객체 번역 데이터 가져오기
2// Use getRawValue for array/object translation data
3 
4import { useTranslation } from '@hua-labs/hua';
5 
6export function ListComponent() {
7  const { t, getRawValue } = useTranslation();
8 
9  // 문자열 배열 가져오기 (Get string array)
10  const items = getRawValue('legal:items') as string[] || [];
11 
12  // 객체 배열 가져오기 (Get object array)
13  interface MenuItem { label: string; href: string; }
14  const menu = getRawValue('nav:menu') as MenuItem[] || [];
15 
16  return (
17    <div>
18      <h2>{t('legal:title')}</h2>
19      <ul>
20        {items.map((item, i) => (
21          <li key={i}>{item}</li>
22        ))}
23      </ul>
24      <nav>
25        {menu.map((item, i) => (
26          <a key={i} href={item.href}>{item.label}</a>
27        ))}
28      </nav>
29    </div>
30  );
31}
32 
33// 번역 파일 예시 (Translation file example):
34// {
35//   "legal:items": ["Privacy Policy", "Terms of Service"],
36//   "nav:menu": [
37//     { "label": "Home", "href": "/" },
38//     { "label": "About", "href": "/about" }
39//   ]
40// }