createCoreI18n

설정

@hua-labs/i18n-core

i18n Provider를 생성하는 팩토리 함수입니다. Next.js App Router와 호환되며, SSR 지원과 다양한 번역 로딩 방식을 제공합니다.

설치

Terminalbash

npm install @hua-labs/i18n-core

Importtsx

import { createCoreI18n } from '@hua-labs/i18n-core';

개요

createCoreI18n은 i18n Provider를 생성하는 팩토리 함수입니다. Next.js App Router와 완벽하게 호환되며, SSR 지원과 다양한 번역 로딩 방식을 제공합니다.

SSR 지원

서버사이드 렌더링 완벽 지원

API 라우트 로더

번역 파일 동적 로딩

정적 파일 로더

public 폴더에서 직접 로드

커스텀 로더

직접 로더 함수 구현

디버그 모드

누락 키 추적 및 로깅

타입 안전

완전한 TypeScript 지원

API 레퍼런스

옵션

이름	타입	기본값	설명
defaultLanguage	string	"ko"	docs:i18n.create-core-i18n.options.defaultLanguage
fallbackLanguage	string	"en"	docs:i18n.create-core-i18n.options.fallbackLanguage
namespaces	string[]	["common"]	docs:i18n.create-core-i18n.options.namespaces
translationLoader	"api" \| "static" \| "custom"	"api"	docs:i18n.create-core-i18n.options.translationLoader
translationApiPath	string	"/api/translations"	docs:i18n.create-core-i18n.options.translationApiPath
supportedLanguages	Array<{ code: string; name: string; nativeName: string }> \| string[]	-	docs:i18n.create-core-i18n.options.supportedLanguages
initialTranslations	Record<string, Record<string, Record<string, string>>>	-	docs:i18n.create-core-i18n.options.initialTranslations
loadTranslations	(language: string, namespace: string) => Promise<Record<string, string>>	-	docs:i18n.create-core-i18n.options.loadTranslations
baseUrl	string	-	docs:i18n.create-core-i18n.options.baseUrl
localFallbackBaseUrl	string	"http://localhost:3010"	docs:i18n.create-core-i18n.options.localFallbackBaseUrl
autoLanguageSync	boolean	false	docs:i18n.create-core-i18n.options.autoLanguageSync
debug	boolean	false	docs:i18n.create-core-i18n.options.debug

반환값

이름	타입	설명
Provider	React.ComponentType<{ children: React.ReactNode }>	docs:i18n.create-core-i18n.returns.Provider

코드 예시

docs:common.basicUsage

tsx

// app/layout.tsx
import { createCoreI18n } from '@hua-labs/i18n-core';

const I18nProvider = createCoreI18n({
  defaultLanguage: 'ko',
  fallbackLanguage: 'en',
  namespaces: ['common', 'navigation'],
  translationLoader: 'api',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <I18nProvider>{children}</I18nProvider>
      </body>
    </html>
  );
}

docs:i18n.create-core-i18n.examples.i18nexampleswithapiroute

tsx

// app/api/translations/[language]/[namespace]/route.ts
import { NextResponse } from "next/server";
import fs from "fs";
import path from "path";

export async function GET(
  request: Request,
  { params }: { params: Promise<{ language: string; namespace: string }> }
) {
  const { language, namespace } = await params;

  const filePath = path.join(
    process.cwd(),
    "public/translations",
    language,
    `${namespace}.json`
  );

  try {
    const content = fs.readFileSync(filePath, "utf-8");
    return NextResponse.json(JSON.parse(content));
  } catch {
    return NextResponse.json({}, { status: 404 });
  }
}

docs:i18n.create-core-i18n.examples.i18nexamplestranslationfiles

tsx

// public/translations/ko/common.json
{
  "welcome": "환영합니다",
  "greeting": "안녕하세요, {{name}}님!"
}

// public/translations/en/common.json
{
  "welcome": "Welcome",
  "greeting": "Hello, {{name}}!"
}

사용 사례

Next.js 앱

Next.js App Router 기반 다국어 앱 구축

다국어 사이트

여러 언어를 지원하는 웹사이트 구축

SSR 지원

서버사이드 렌더링과 완벽 호환

useCurrencyFormatter createZustandI18n