Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로, 멀티 언어 지원을 통해 웹 애플리케이션의 국제화를 간편하게 구현할 수 있습니다. 이번 포스트에서는 Next.js에서 멀티 언어를 지원하는 방법을 알아보겠습니다.

i18n 라이브러리 선택

Next.js에서 멀티 언어를 지원하기 위해선 i18n 라이브러리를 선택해야 합니다. 다양한 i18n 라이브러리 중에서 react-i18next, next-i18next 등이 인기있는 선택지입니다. 이들 라이브러리는 다국어 번역을 위한 효율적인 메커니즘을 제공하며, Next.js와의 통합도 잘 되어 있습니다.

프로젝트 설정

먼저 프로젝트에 i18n 라이브러리를 설치합니다. npm을 사용하는 경우, 다음과 같이 명령어를 실행합니다:

npm install --save react-i18next

프로젝트의 pages 디렉토리에 locales 디렉토리를 생성합니다. 이 디렉토리에서 각 언어의 JSON 파일을 관리합니다. 예를 들어, en.json, ko.json과 같은 파일을 생성합니다.

이제 Next.js의 Internationalized Routing 기능을 활성화시키기 위해 next.config.js 파일을 생성하고 다음과 같이 설정합니다:

module.exports = {
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
  },
}

이렇게 설정하면 Next.js는 언어에 따라 각각의 경로를 생성하고, 해당 언어의 JSON 파일을 사용하여 번역 내용을 가져올 수 있습니다.

페이지에 번역 텍스트 추가하기

다음으로, 번역이 필요한 페이지에 i18n 라이브러리를 사용하여 번역 텍스트를 추가합니다. React 컴포넌트 내에서 useTranslation 훅을 사용하면 간편하게 번역 기능을 사용할 수 있습니다. 예를 들어:

import { useTranslation } from 'react-i18next';

function Home() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('welcomeMessage')}</p>
    </div>
  );
}

여기서 t() 함수는 언어 설정에 따라 올바른 번역 텍스트를 가져옵니다. title과 welcomeMessage는 언어 파일에서 해당 키에 맞는 번역 텍스트를 제공해야 합니다.

언어 변경하기

마지막으로, 언어 변경을 위한 선택지를 제공해야 합니다. 예를 들어, 언어 변경을 위한 토글 버튼을 추가할 수 있습니다. useTranslation 훅에서 제공하는 i18n.changeLanguage 함수를 사용하면 언어를 변경할 수 있습니다. 예를 들어:

import { useTranslation } from 'react-i18next';

function LanguageToggle() {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ko')}>한국어</button>
    </div>
  );
}

위 코드에서 changeLanguage 함수를 호출하여 언어를 변경할 수 있습니다.

결론

이제 Next.js에서 멀티 언어를 지원하는 방법에 대해 알아보았습니다. i18n 라이브러리를 사용하여 번역 텍스트를 추가하고, 언어 변경을 위한 선택지를 제공하면 간편하게 멀티 언어 지원을 구현할 수 있습니다.

더 자세한 내용은 react-i18next나 next-i18next의 공식 문서를 참고하시기 바랍니다.

</br> </br>