Magic Translate vs. next-intl

next-intl 가장 널리 사용되는 Next.js i18n 라이브러리야.앱 라우터 및 리액트 서버 컴포넌트와 함께 작동하고 각 메시지의 키가 있는 메시지 파일을 중심으로 구축돼.Magic Translate 또한 서버에서 완전히 번역된 페이지를 렌더링하지만 사용자가 구성 요소에 텍스트를 직접 작성하면 번역이 자동으로 생성돼.

한 눈에

	Magic Translate	next-intl
텍스트 쓰는 방법	`<T>` 에 싸인 너의 말	각 메시지의 키, 예: `t('title')`
번역들	AI 번역, 자동으로 생성돼	너나 네 번역자들이 써줘.
메시지 파일들	아무 것도 없어.	언어당 JSON 파일 한 개
새 언어들	목록에 로케일을 추가해.	모든 메시지를 새 언어로 번역해
서버 렌더링	리액트 서버 컴포넌트, 완전히 번역된 HTML	리액트 서버 컴포넌트, 완전히 번역된 HTML
로컬 라우팅	`[locale]` 세그먼트 사용	내장 라우팅과 미들웨어
가격	무료 요금제, 그 다음에 사용량에 따른 월간 요금제	오픈 소스이고 무료야.

코드가 어떻게 다른지

next-intl 하면 각 언어의 메시지 파일을 보관하고 각 메시지를 키로 참조해.

// messages/en.json
{ "HomePage": { "title": "Welcome to our website" } }

// app/[locale]/page.tsx
import { getTranslations } from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

Magic Translate 하면 텍스트가 페이지에 그대로 있어.

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

Next.js 가이드가 전체 설정을 보여줘.

언제 고를까 Magic Translate

메시지 파일을 유지하지 않고 여러 언어로 된 Next.js 사이트를 원해.
텍스트가 자주 바뀌고 모든 언어가 최신 상태로 유지되길 바랄 거야.
번역자가 없거나 번역을 기다리지 않고 업데이트를 공개하고 싶은 거야.

언제 고를까 next-intl

모든 텍스트는 사람이 번역하거나 검토해야 해.
ICU 메시지로 복수형, 날짜, 숫자를 정확하게 제어해야 해.
외부 서비스 없는 무료 오픈 소스 라이브러리가 필요해.

둘 다 사용

로케일 라우팅과 포맷을 위해 next-intl 유지하고 텍스트에 Magic Translate 사용할 수 있어.로케일을 next-intl 에서 createLocalizedT 로 전달하고 키를 한 번에 한 페이지씩 <T> 으로 바꾸어.

해볼 준비가 됐어?시작 안내서에 따라 5분 만에 첫 번째 구성 요소를 번역해.