JavaScript i18n: Intl API를 활용한 브라우저 내장 국제화
자바스크립트에는 숫자, 날짜, 목록의 서식을 지정하고 다양한 로케일에 걸쳐 복수형 규칙을 처리하기 위한 내장 표준으로 Intl API가 포함되어 있습니다. 별도의 외부 라이브러리가 필요하지 않습니다. 이 API는 모든 최신 브라우저와 Node.js에서 지원되며, 로케일에 민감한 문자열 비교, 분할 및 상대적 시간 서식 지정을 기본적으로 제공합니다.
Add i18n to plain JavaScript in three steps
There is no JavaScript-specific package to install: @better-i18n/core is the plain-JavaScript client every other SDK here wraps.
Install the client
One dependency-free package. It runs in browsers, Node, Deno, Bun and Cloudflare Workers.
npm install @better-i18n/core
# Zero dependencies. Runs in browsers, Node, Deno,
# Bun and Cloudflare Workers.Create the client once
Instantiate at module scope so the 60-second in-memory cache is shared instead of rebuilt on every call.
import { createI18nCore } from '@better-i18n/core'
export const i18n = createI18nCore({
projectId: 'your-org/your-project', // Settings → General → Project ID
defaultLocale: 'en',
})Read a message
getMessages returns a plain nested object, so a four-line lookup helper is the whole runtime you need.
import { i18n } from './i18n.js'
const messages = await i18n.getMessages('en')
// getMessages resolves to { namespace: { key: value } }
const t = (path) =>
path.split('.').reduce((node, part) => node?.[part], messages) ?? path
document.querySelector('h1').textContent = t('home.title')
// Locales come from the project manifest, not a hardcoded array
const languages = await i18n.getLanguages()How it works
Where a JavaScript string comes from
No build step and no bundled locale files: the client resolves a locale at runtime and the edge answers it.
Read path — every locale load
Reads from the plain object getMessages() already returned.
0 network calls per render
getMessages(locale) — served from the in-memory cache if it is warm.
60s TTL · 0 deps
Cloudflare worker answers from the nearest edge cache.
max-age=60 · always 200
The published translation files the sync worker wrote.
source of truth
Fallback chain — tried in order when a hop fails
Write path — dashboard to app
Proposal reviewed in the dashboard, glossary enforced.
MCP · dashboard · CLI
Sync worker writes the locale files to R2.
better-i18n publish
Fire-and-forget purge of the affected keys and the manifest.
non-critical by design
The next getMessages() past the TTL returns the new copy.
~60s worst case
With the client, or with fetch
The client adds caching, retries and the fallback chain. If you would rather own that yourself, the CDN is a plain JSON endpoint.
import { i18n } from './i18n.js'
import { normalizeLocale } from '@better-i18n/core'
let current = 'en'
let messages = await i18n.getMessages(current)
export async function setLocale(next) {
// The CDN stores locales lowercased: pt-BR → pt-br
current = normalizeLocale(next)
messages = await i18n.getMessages(current)
document.documentElement.lang = current
render()
}JavaScript Intl API 실전
현대 브라우저 또는 Node.js 런타임에서 로케일별 출력을 위해 내장 Intl 생성자를 사용하여 통화, 날짜, 서수를 포맷합니다.
// Using the built-in Intl API
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
});
console.log(formatter.format(1234.56)); // "1.234,56 €"
// Date formatting
const date = new Intl.DateTimeFormat('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log(date.format(new Date())); // "2026年3月2日"
// Pluralization
const plural = new Intl.PluralRules('en');
const suffixes = { one: 'st', two: 'nd', few: 'rd', other: 'th' };
function ordinal(n) {
return `${n}${suffixes[plural.select(n)]}`;
}JavaScript Intl API 기능
관련 가이드
다른 프레임워크 가이드 살펴보기
Get started
지금 바로 JavaScript 국제화(i18n)를 시작하세요
AI 기반 워크플로, CLI 동기화, 50ms 미만의 CDN 제공으로 JavaScript 번역을 관리하십시오.