Vite i18n

개발 속도를 떨어뜨리지 않는 Vite i18n

Vite 프로젝트에서 Better I18N을 사용하면 핫 리로드는 빠르게, 번역 키는 타입 안전하게 유지되고, 로케일 콘텐츠를 앱과 마케팅 페이지 모두에 손쉽게 배포할 수 있습니다.

Setup

Get started in 3 steps

React에 적합한 SDK 설치하기

대부분의 Vite 프로젝트에서는 @better-i18n/use-intl과 use-intl로 시작하면 일반적인 컴포넌트 트리에서 번역이 동작합니다.

terminal

npm install @better-i18n/use-intl use-intl

Wrap your app once

첫 렌더링 전에 로케일 데이터를 사용할 수 있도록 Vite 진입 파일에 BetterI18nProvider를 마운트하세요.

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BetterI18nProvider } from '@better-i18n/use-intl';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BetterI18nProvider project="your-org/your-project" locale="en">
    <App />
  </BetterI18nProvider>
);

컴포넌트 안에서 번역하기

콘텐츠를 다듬는 동안 Vite 핫 리로드 속도를 유지하면서, 키와 보간에는 타입이 지정된 훅을 사용하세요.

src/components/Hero.tsx

import { useTranslations } from '@better-i18n/use-intl';

export function Hero() {
  const t = useTranslations('landing');

  return <h1>{t('headline')}</h1>;
}

Capabilities

Vite에서 Better I18N을 사용하는 이유

번역 키의 타입을 유지하면서 Vite HMR로 빠르게 로컬 반복 작업을 진행합니다

React, Vue 등 Vite 기반 프런트엔드에서 잘 작동합니다

CDN으로 전달되는 메시지 덕분에 빌드는 가벼워지고 업데이트는 빨라집니다

마케팅 사이트, 대시보드, 하이브리드 앱 셸에 적합합니다

직접 관리하던 JSON 파일에서 옮겨 오는 팀도 쉽게 시작할 수 있습니다

프레임워크마다 다른 복잡성을 번역 워크플로 밖에 둡니다

Example

Typical Vite setup

타입이 지정된 번역과 빠른 반복이 필요한 Vite 앱을 위한 최소한의 provider 기반 설정입니다.

import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';

function LandingHero() {
  const t = useTranslations('landing');

  return (
    <section>
      <h1>{t('headline')}</h1>
      <p>{t('subheadline')}</p>
    </section>
  );
}

export default function App() {
  return (
    <BetterI18nProvider project="your-org/your-project" locale="en">
      <LandingHero />
    </BetterI18nProvider>
  );
}

JavaScript i18nLibrary-agnostic patterns for browser-side internationalization.Next.js i18nWhen your Vite app grows into server-rendered routing and SEO needs.CLI Code ScanningAutomatically detect and audit translation keys in fast-moving frontends.

Other frameworks

React i18n Next.js i18n Vue i18n Nuxt i18n Angular i18n Svelte i18n Remix & Hydrogen i18n Expo i18n iOS i18n Flutter i18n TanStack Start i18n Server i18n Hono i18n Rust i18n

Get started

현지화된 Vite 앱을 더 빠르게 배포하세요

개발 속도를 유지하면서 번역을 실제 워크플로로 옮기고, 로케일 파일을 직접 수정하지 않고 업데이트를 배포하세요.

Get started free Read the docs