namespace 번역 파일을 처음 필요한 시점에 불러와 초기 번들 부담을 줄입니다.
현재 API 기준
Lazy loading은 createI18n 옵션이 아닙니다. I18nProvider에 loadNamespace를 전달하면 자동으로 lazy mode가 활성화됩니다.
namespace와 language를 받아 해당 JSON 파일을 동적으로 import합니다.
// locales/index.ts
export async function loadNamespace(namespace: string, language: string) {
const module = await import(`./${namespace}/${language}.json`);
return module.default;
}fallback namespace는 공통 문구를 위해 미리 로드합니다.
<I18nProvider
initialLanguage="ko"
loadNamespace={loadNamespace}
fallbackNamespace="common"
preloadNamespaces={["common"]}
>
<App />
</I18nProvider>useTranslation(namespace)가 필요한 namespace를 자동으로 요청합니다.
"use client";
import { useTranslation } from "i18nexus";
export function ProductPage() {
const { t, isReady } = useTranslation("product");
if (!isReady) return null;
return <h1>{t("Product list")}</h1>;
}