🎨

I18nProvider

React Context Provider with cookie-based language persistence and SSR support

Key Features

🍪

Cookie persistence

Automatically save language selection

🔄

SSR Ready

Perfect Next.js compatibility

⚡

Zero Hydration

No layout shift on load

📘

TypeScript

Includes full type safety

Basic Setup

1Server Layout (app/layout.tsx)

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>
  );
}

2Client Component (app/page.tsx)

"use client";

import { useTranslation, useLanguageSwitcher } from "i18nexus";

export default function HomePage() {
  const { t } = useTranslation();
  const { currentLanguage, changeLanguage } = useLanguageSwitcher();

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

Live Demo

Current Language

English

Language Switcher

💡 Try switching - it's saved in cookies!

Translation Example

t("Welcome")Welcome

t("Quick Start")Quick Start

t("Why i18nexus?")Why i18nexus?

t("Cookie persistence")Cookie persistence

API Reference

useTranslation()

const { t } = useTranslation();

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

Hook to access translation function in Client Components

useLanguageSwitcher()

const {
  currentLanguage,
  changeLanguage,
  availableLanguages,
} = useLanguageSwitcher();

changeLanguage("en")

Hook for language switching and state management