I18nProvider

쿠키 기반 언어 영속성 및 SSR 지원을 갖춘 React Context Provider

현재 권장 경로

초급 사용자는 I18nProvider와 root useTranslation을 사용합니다. createI18n은 번역 객체에서 namespace/key 타입 추론이 필요할 때 쓰는 고급 typed API입니다.

기본 설정

example.tsxtsx

// app/layout.tsx
import { cookies } from "next/headers";
import { ClientProvider } from "./ClientProvider";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const cookieStore = await cookies();
  const language = cookieStore.get("i18n-language")?.value || "ko";

  return (
    <html lang={language}>
      <body>
        <ClientProvider language={language}>{children}</ClientProvider>
      </body>
    </html>
  );
}

example.tsxtsx

// app/ClientProvider.tsx
"use client";

import { I18nProvider } from "i18nexus";
import { loadNamespace } from "@/locales";

export function ClientProvider({
  children,
  language,
}: {
  children: React.ReactNode;
  language: string;
}) {
  return (
    <I18nProvider
      initialLanguage={language}
      loadNamespace={loadNamespace}
      fallbackNamespace="common"
      preloadNamespaces={["common", "home"]}
      languageManagerOptions={{
        defaultLanguage: "ko",
        availableLanguages: [
          { code: "ko", name: "한국어" },
          { code: "en", name: "English" },
        ],
        cookieName: "i18n-language",
      }}
    >
      {children}
    </I18nProvider>
  );
}

useTranslation

example.tsxtsx

"use client";

import { useTranslation } from "i18nexus";

export default function HomePage() {
  const { t, currentLanguage, isReady } = useTranslation("provider");

  if (!isReady) return null;

  return <h1>{t("환영합니다")} ({currentLanguage})</h1>;
}

클라이언트 컴포넌트에서 번역 함수에 접근하기 위한 훅

createI18n

Provider를 대체하는 API가 아니라, 타입 추론을 강화하는 선택지입니다.

example.typescripttypescript

import { createI18n, type I18nTranslations } from "i18nexus";

const translations = {
  common: {
    ko: { save: "저장" },
    en: { save: "Save" },
  },
} as const satisfies I18nTranslations;

export const i18n = createI18n(translations, {
  fallbackNamespace: "common",
});

라이브 데모

현재 언어