다국어 설정

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

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