Next.js 다국어(i18n) 설정 (react-i18next)

Next.js 다국어(i18n) 라이브러리

Next.js에서 다국어 설정을 위한 라이브러리는 여러개 있다.

많이 사용하는 라이브로리로는 react-i18next next-i18next next-translation 이렇게 3가지 정도가 있는 듯하다.

 

react-i18next

• React 애플리케이션에서 다국어 지원을 위한 널리 사용되는 라이브러리
• i18next 라이브러리에 기반하여 구축되었으며, 번역 리소스를 JSON 파일로 관리한다.
• 컴포넌트 기반의 API를 제공하여 쉽게 다국어 지원 구현할 수 있다.
• 다양한 기능과 확장성을 제공하며, 플러그인 시스템을 통해 기능 확장이 가능하다.
• 단일 페이지 애플리케이션(SPA) 및 서버 사이드 렌더링(SSR) 모두 지원한다.
• 다국어 리소스를 동적으로 불러올 수 있는 기능을 제공하여 런타임에서 번역을 변경할 수 있다.

✍️ 장점

• 사용자가 많고 활발한 커뮤니티가 존재하여 문제 해결 및 지원이 용이하다.
• 다양한 기능과 확장성을 제공하여 다국어 지원을 유연하게 구현할 수 있다.
• JSON 파일을 기반으로 번역 리소스를 관리하므로 다양한 도구와 통합이 가능하다.
• 단일 페이지 애플리케이션(SPA) 및 서버 사이드 렌더링(SSR)을 모두 지원합니다.

✍️ 단점

• 추가적인 설정 및 초기 구성이 필요할 수 있어 초기 학습 곡선이 존재할 수 있다.
• 큰 규모의 다국어 애플리케이션에서 성능이 약간 저하될 수 있다.

 😎 공식가이드

 

next-i18next

• Next.js 프레임워크와 함께 사용하기 위해 설계된 다국어 지원 라이브러리
• i18next와 함께 사용되며, 다양한 언어 관리 방식을 지원한다 (JSON 파일, 언어 파일, 데이터베이스 등)
• 다국어 라우팅을 간편하게 처리할 수 있어 URL에 언어를 포함하여 페이지별로 다국어 처리를 할 수 있다.
• 정적 사이트 생성(Static Site Generation) 및 서버 사이드 렌더링(SSR)을 효율적으로 지원한다.
• next-translate에 비해 조금 더 복잡한 설정이 필요할 수 있으나, Next.js 프로젝트에서의 다국어 지원을 용이하게 해준다.

✍️ 장점

• Next.js 프레임워크와 함께 사용하기 위해 특별히 설계되어 통합이 용이하다.
• 다국어 라우팅을 간편하게 처리할 수 있어 URL에 언어를 포함한 페이지별 다국어 처리가 용이하다.
• 정적 사이트 생성(Static Site Generation) 및 서버 사이드 렌더링(SSR)을 효율적으로 지원한다.
• 다양한 언어 관리 방식을 지원하여 번역 리소스를 효과적으로 관리할 수 있다.

✍️ 단점

• 설정 및 초기 구성이 상대적으로 복잡할 수 있다.
• 다른 Next.js 플러그인과의 호환성 문제가 발생할 수 있다.
• 커뮤니티 규모가 react-i18next에 비해 상대적으로 작다.

 😎 공식가이드

 

next-translate

• Next.js와 함께 사용하기 위한 다국어 지원 라이브러리
• JavaScript 모듈을 사용하여 번역 리소스를 관리하며, 번역 리소스 파일을 번들링하지 않고 런타임에 동적으로 로드한다.
• 단순하고 직관적인 API를 제공하여 사용하기 쉽고 간결한 구성을 할 수 있다.
• 정적 사이트 생성(Static Site Generation) 및 서버 사이드 렌더링(SSR)을 지원한다.
• 번역 리소스를 JavaScript 모듈로 관리하기 때문에 번역 파일을 작성하는 절차가 편리하고 유연하다.

✍️ 장점

• 단순하고 직관적인 API를 제공하여 사용하기 쉽고 간결한 구성을 할 수 있다.
• 정적 사이트 생성(Static Site Generation) 및 서버 사이드 렌더링(SSR)을 지원한다.
• 번역 리소스를 JavaScript 모듈로 관리하므로 번역 파일 작성이 편리하고 유연하다.

✍️ 단점

• react-i18next 혹은 next-i18next보다 다양한 기능과 확장성이 제한적일 수 있다.
• JavaScript 모듈을 사용하여 번역 리소스를 관리하기 때문에 번역 파일 크기가 커진다.

 

react-i18next이 압도적이긴 하다..

 

결론은 react-i18next

나는 Next.js 프로젝트를 만들고 있기 때문에 next-i18next 사용을 고민했지만, URL에 locale이 들어가도록 설계하는 것이 부적합하여 react-i18next를 사용하기로 했다.

왜 Next.js는 i18n을 위해 라우팅하는 방법을 선택했을까?

사용자는 충분히 다른 언어로 애플리케이션을 이용하고 싶을 수 있습니다. 하지만 수화 이후 메모리 값을 통해 언어를 수정하는 방법은 마찬가지로 Next.js가 기본적으로 서버 사이드 렌더링을 하기 때문에 UX를 고려한다면 좋은 선택은 아닙니다. 위에서 언급한대로 HTTP 헤더에서 Accept-Language 를 직접 수정하는 방법도 권장되지 않습니다. 따라서 Next.js에서는 정적 페이지에서 i18n을 지원하는 방법(URL을 기반으로 i18n을 지원)을 따라가고 있다고 생각합니다.
핵심은 Next.js에서 i18n을 제공하기 위해서는 example.com/ko, example.com/en-US 와 같은 식으로 라우팅이 이루어져야 한다는 것입니다. 다행히도 Next.js는 v10.0.0 부터 i18n Routing을 기본적으로 제공합니다. 이를 이용하기 위해서 next.config.js 를 설정해야 합니다.

참고

---

react-i18next 설정

라이브러리 설치

npm install react-i18next i18next --save

 

다국어 json 파일 생성

src/translations 하위에 각 locale에 맞는 json 파일 생성

// en_US.json
{
  "hello": "Hello World!"
}

// ko_KR.json
{
  "hello": "안녕 세상아!"
}

 

i18n.ts 파일 생성

/src/utils/ 하위에 설정 파일 생성

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import usTranslations from '@/translations/en_US.json';
import krTranslations from '@/translations/ko_KR.json';
import jpTranslations from '@/translations/ja_JP.json';

const resources = {
  en_US: {
    translation: usTranslations,
  },
  ko_KR: {
    translation: krTranslations,
  },
  ja_JP: {
    translation: jpTranslations,
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en_US',
  fallbackLng: 'en_US',
  debug: true,
  interpolation: { escapeValue: true },
  returnObjects: true,
  returnEmptyString: true,
  returnNull: true,
});

export default i18n;

 

다국어 적용

_app.tsx에 I18nextProvider 태그로 감싸준다.

import { AppProps } from 'next/app';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@/styles/style.scss';
import Layout from '@/components/layout/Layout';
import { RecoilRoot } from 'recoil';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/utils/i18n';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <I18nextProvider i18n={i18n}>
      <RecoilRoot>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </RecoilRoot>
    </I18nextProvider>
  );
}

export default MyApp;

index.tsx에 {t('hello')} 와 같이 사용하면 된다!

import { useTranslation } from 'react-i18next';

const Index = () => {
  const { t } = useTranslation();
  return <div>{t('hello')}</div>;
};

export default Index;

 

💡 로케일 변경 방법

const { i18n } = useTranslation();
i18n.changeLanguage(locale);