다국어(i18n) 처리 — Next.js와 react-intl 실전 적용

next-intl 설정

// next.config.ts
import createNextIntlPlugin from "next-intl/plugin";
const withNextIntl = createNextIntlPlugin();
export default withNextIntl({ /* config */ });

메시지 사용

// messages/ko.json
{ "greeting": "안녕하세요, {name}님" }

// 컴포넌트에서
import { useTranslations } from "next-intl";

function Welcome() {
  const t = useTranslations();
  return <h1>{t("greeting", { name: "김철수" })}</h1>;
}

번역 워크플로

Crowdin, Lokalise 등 번역 플랫폼과 CI를 연동하면 효율적입니다.