시작하기

프로젝트에 i18nexus를 설정하는 완벽한 단계별 가이드

설치

React 컴포넌트와 CLI 도구를 모두 설치합니다

example.bashbash

npm install i18nexus

프로젝트 초기화

다음을 생성합니다

example.bashbash

npx i18n-sheets init

i18nexus.config.json - 프로젝트 설정 파일
locales/ - 번역 파일 디렉토리 (ko.json, en.json)

i18n 설정

Lazy loading은 createI18n 옵션이 아니라 I18nProvider props로 설정합니다.

example.typescripttypescript

// locales/index.ts
export async function loadNamespace(namespace: string, lang: string) {
  const module = await import(`./${namespace}/${lang}.json`);
  return module.default;
}

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"]}
      languageManagerOptions={{
        defaultLanguage: "ko",
        availableLanguages: [
          { code: "ko", name: "한국어" },
          { code: "en", name: "English" },
        ],
      }}
    >
      {children}
    </I18nProvider>
  );
}

한국어 텍스트 감싸기

example.bashbash

npx i18n-wrapper

중요: 서버 컴포넌트 확인

클라이언트 컴포넌트는 useTranslation()을 사용하고, 서버 컴포넌트는 createServerTranslation()을 사용합니다.

클라이언트 컴포넌트의 경우

example.tsxtsx

"use client";

import { useTranslation } from "i18nexus";

export default function Page() {
  const { t, isReady } = useTranslation("getting-started");

  if (!isReady) return null;

  return <div>{t("안녕하세요")}</div>;
}

서버 컴포넌트의 경우

example.tsxtsx

import { headers } from "next/headers";
import { createServerTranslation, getServerLanguage } from "i18nexus/server";

import commonEn from "@/locales/common/en.json";
import commonKo from "@/locales/common/ko.json";
import gettingStartedEn from "@/locales/getting-started/en.json";
import gettingStartedKo from "@/locales/getting-started/ko.json";

const translations = {
  common: { en: commonEn, ko: commonKo },
  "getting-started": { en: gettingStartedEn, ko: gettingStartedKo },
};

export default async function Page() {
  const lang = getServerLanguage(await headers(), {
    defaultLanguage: "ko",
    availableLanguages: ["en", "ko"],
  });
  const t = createServerTranslation(lang, translations);

  return <div>{t("안녕하세요")}</div>;
}

번역 키 추출

example.bashbash

npx i18n-extractor

코드를 스캔하여 번역 파일을 생성/업데이트합니다

완료!

앱이 완전히 국제화되었으며 배포할 준비가 되었습니다

I18nProvider 자세히 알아보기 서버 컴포넌트