React에서 사용할 수 있는 국제화(internalization, 이하 i18n) 라이브러리는 두 종류가 있습니다.

결론부터 말하자면 다음과 같습니다.

  1. Next.js와 Server Side Rendering(SSR)을 사용해야 한다면 next-i18next
  2. Next.js의 Static Site Generation(SSG)을 사용해야 한다면 react-i18next
    • SSR이 필요해질 경우 next-i18next로 갈아타기 편리하기 때문
  3. Next.js를 사용하지 않는다면 react-intl

인지도

react-intl react-i18next
다운로드 수 주당 70만건 주당 52만건
Github Star 11.6k 4.8k
Github Fork 1.1k 623

지표를 보면 알겠지만 둘 다 널리 사랑받는 라이브러리라 대중의 검증은 끝났다고 봐도 됩니다.

API

react-intl

import React from 'react';
import {useIntl, FormattedDate} from 'react-intl';

const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
  const intl = useIntl();
  return (
    <span title={intl.formatDate(date)}>
      <FormattedDate value={date} />
    </span>
  );
};

export default FunctionComponent;

react-intl은 번역뿐만 아니라 숫자, 날짜등의 formatting까지 지원합니다.

react-i18next

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

react-i18next은 번역에만 충실합니다.

Server Side Rendering (SSR)

react-intl은 SSR에 대해 라이브러리 수준에서 특별한 고려는 하지 않았습니다.

react-i18next의 경우 SSR이 필요한 경우 Next.js와 함께 next-i18next을 사용하라고 공식 문서에서 권장합니다.

결론

react-intl react-i18next next-i18next
인지도 높음 높음 낮음
SSR 특별한 고려 없음 공식 문서에서 next-i18next 추천 Next.js를 쓴다면 단연코
API 다양함(날짜, 시간, 숫자등) 번역에 충실 번역에 충실 + SSR

Next.js를 사용하지 않는다면 react-intl을, Next.js를 사용하면서 SSR이 필요하면 next-i18next를, Next.js를 사용하면서 SSG가 필요하면 react-i18next를 사용하면 되겠습니다.

Next.js의 SSG가 필요한 상황에서는 사실 둘 중 아무거나 사용해도 됩니다. 그러나 SSR이 필요해졌을 때 react-i18next를 사용하고 있었다면 next-i18next의 전환이 훨씬 간편하므로 Next.js를 사용한다면 react-i18next를 추천합니다.


https://github.com/lukeed/rosetta

292 byte밖에 차지하지 않는 i18n 라이브러리 등장.