Next.js 국제화 기능

Next.js 다국어 앱 구축에 필요한 모든 것. CDN 기반 번역, 서버 사이드 렌더링, 즉시 로케일 전환.

시작하기 대시보드 열기

CDN 기반 전송

번역은 Cloudflare CDN을 통해 전 세계 엣지 위치에서 제공됩니다. 게시 시 자동 캐시 무효화로 50ms 미만의 로딩 시간을 달성합니다.

CDN 전송 알아보기

서버 사이드 렌더링

레이아웃에서 getMessages()를 사용해 메시지를 서버 측에서 로드합니다. 미번역 콘텐츠 깜빡임 없음, 사전 렌더링된 번역으로 SEO 완전 지원.

API 레퍼런스 보기

즉시 로케일 전환

useSetLocale()로 클라이언트 측에서 언어 전환 — 전체 페이지 재로드 불필요. BetterI18nProvider가 CDN에서 새 번역을 가져와 즉시 재렌더링합니다.

클라이언트 측 문서

동적 언어 감지

useManifestLanguages()는 CDN 매니페스트에서 사용 가능한 언어를 가져옵니다. 대시보드에서 언어를 추가하면 앱에 자동으로 표시됩니다.

훅 살펴보기

타입 안전 번역 키

next-intl 기반으로 TypeScript를 완전 지원합니다. useTranslations()은 번역 키에 대한 컴파일 시 검사를 제공 — 런타임 이전에 오류를 포착합니다.

타입 안전 API 문서

AI 기반 번역

better-i18n 대시보드에서 AI 번역 제안을 받으세요. 사람이 승인하는 워크플로우로 품질을 보장합니다. 프로젝트 전체를 몇 날이 아니라 몇 분 만에 번역하세요.

대시보드 사용해보기

미들웨어 로케일 감지

betterMiddleware()는 URL 경로, 쿠키, 또는 Accept-Language 헤더에서 사용자 로케일을 감지합니다. 인증 연동을 쉽게 하는 Clerk 스타일 콜백 패턴.

미들웨어 설정 가이드

대시보드 관리

dash.better-i18n.com에서 번역, 언어, 네임스페이스를 관리하세요. 실시간 협업, 버전 히스토리, GitHub 연동.

대시보드 열기

Integration Journey

Get up and running in 4 simple steps.

Install

Add the SDK to your project

bun add @better-i18n/next

Configure

Create your i18n config

export const i18n = createI18n({ ... })

Wrap Provider

Add BetterI18nProvider to your layout

<BetterI18nProvider>

Use Translations

Call useTranslations() in any component

const t = useTranslations("ns")

Framework Compatibility

better-i18n works with all major React frameworks out of the box.

Feature	Next.js	Expo	Remix	Hono	TanStack
CDN Fetch	✓	✓	✓	✓	✓
ISR / Revalidation	✓	—	✓	—	✓
useSetLocale()	✓	✓	✓	✓	✓
useFormatter()	✓	✓	✓	✓	✓
LocaleDropdown	✓	✓	✓	✓	✓
SSR Support	✓	—	✓	✓	✓

빠른 통합

5분 이내에 Next.js 앱에 국제화를 추가하세요. 전체 가이드 따르기

i18n.config.ts

// i18n.config.ts
import { createI18n } from "@better-i18n/next";

export const i18n = createI18n({
  project: "your-org/your-project",
  defaultLocale: "en",
});

// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();

// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
  {children}
</BetterI18nProvider>

// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;

다국어 지원을 시작할 준비가 되셨나요?

무료 계정을 만들고, 언어를 추가하고 번역을 시작하세요. 글로벌 사용자를 위한 앱을 구축하는 수천 명의 개발자 커뮤니티에 참여하세요.

문서 읽기 대시보드 열기

로드 중...

Feature

Next.js

Expo

Remix

Hono

TanStack

CDN Fetch

✓

ISR / Revalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

SSR Support

✓

—

✓

// i18n.config.ts import { createI18n } from "@better-i18n/next"; export const i18n = createI18n({ project: "your-org/your-project", defaultLocale: "en", }); // middleware.ts import { i18n } from "./i18n.config"; export default i18n.betterMiddleware(); // app/[locale]/layout.tsx const messages = await i18n.getMessages(locale); <BetterI18nProvider config={i18n.config} locale={locale} messages={messages}> {children} </BetterI18nProvider> // Any component const t = useTranslations("namespace"); return <h1>{t("title")}</h1>;