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"	Default language code
fallbackLanguage	string	"en"	Fallback language when translation is missing
namespaces	string[]	["common"]	Translation namespaces to load
translationLoader	"api" \| "static" \| "custom"	"api"	How to load translation files
translationApiPath	string	"/api/translations"	API route path for translations
supportedLanguages	Array<{ code: string; name: string; nativeName: string }> \| string[]	-	List of supported languages
initialTranslations	Record<string, Record<string, Record<string, string>>>	-	Pre-loaded translations for SSR
loadTranslations	(language: string, namespace: string) => Promise<Record<string, string>>	-	Custom translation loader function (for 'custom' loader mode or standalone loaders)
baseUrl	string	-	Base URL for API requests (required for SSR to use absolute URLs)
localFallbackBaseUrl	string	"http://localhost:3010"	Local dev fallback URL when baseUrl is not set
autoLanguageSync	boolean	false	Auto-sync language change events across tabs/windows
debug	boolean	false	Enable debug mode

반환값


Provider	React.ComponentType<{ children: React.ReactNode }>	I18n Provider component to wrap your app

코드 예시

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

i18n:examples.withApiRoute

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

i18n:examples.translationFiles

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