🎨

I18nProvider (Deprecated)

⚠️ I18nProvider는 더 이상 필요하지 않습니다. createI18n()을 사용하면 Provider 없이도 i18n을 사용할 수 있습니다.

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

주요 기능

🍪

쿠키 영속성

언어 선택을 자동으로 저장

🔄

SSR 준비 완료

완벽한 Next.js 호환성

⚡

제로 하이드레이션

로드 시 레이아웃 이동 없음

📘

TypeScript

완전한 타입 안정성 포함

기본 설정

1서버 레이아웃 (app/layout.tsx)

// ❌ 옛날 방식 (Provider 필요)
import { I18nProvider } from "i18nexus";
import { cookies } from "next/headers";

export default function RootLayout({ children }) {
  const language = cookies().get("i18n-language")?.value || "ko";

  return (
    <html lang={language}>
      <body>
        <I18nProvider
          initialLanguage={language}
          languageManagerOptions={{
            defaultLanguage: "ko",
            availableLanguages: [
              { code: "ko", name: "한국어", flag: "🇰🇷" },
              { code: "en", name: "English", flag: "🇺🇸" },
            ],
          }}
          translations={{
            ko: { "환영합니다": "환영합니다" },
            en: { "환영합니다": "Welcome" },
          }}
        >
          {children}
        </I18nProvider>
      </body>
    </html>
  );
}

// ✅ 새로운 방식 (Provider 불필요)
// locales/index.ts에서 createI18n으로 설정
import { useTranslation, useLanguageSwitcher } from "i18nexus";

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

2클라이언트 컴포넌트 (app/page.tsx)

"use client";

import { useTranslation, useLanguageSwitcher } from "i18nexus";

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

  return (
    <div>
      <h1>{t("환영합니다")}</h1>
      <button onClick={() => changeLanguage("en")}>
        English
      </button>
    </div>
  );
}

라이브 데모

현재 언어

한국어

언어 전환

💡 전환해보세요 - 쿠키에 저장됩니다!

번역 예제

t("환영합니다")환영합니다

t("빠른 시작")빠른 시작

t("왜 i18nexus인가?")왜 i18nexus인가?

t("쿠키 영속성")쿠키 영속성

API 레퍼런스

useTranslation()

const { t } = useTranslation("provider");

// Simple usage
t("key")
t("한국어 텍스트")

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

changeLanguage()

// 어디서나 직접 호출 가능
changeLanguage("en");

// 가능한 언어 목록
const languages = getAvailableLanguages();

// 현재 언어
const current = getCurrentLanguage();

언어 전환 및 상태 관리를 위한 메서드