Next.js에서 `next-intl`을 이용한 다국어 처리 및 언어 변경 Select Box 구현하기

안녕하세요. 이번 글에서는 Next.js 애플리케이션에서 next-intl을 이용해 다국어 처리를 구현하고, 사용자가 언어를 선택하여 변경할 수 있는 Select Box를 만드는 방법에 대해 소개하겠습니다.

next-intl을 활용하여 애플리케이션에 다국어를 적용하지 않았다면, 아래 링크에서 먼저 다국어 설정 방법을 확인해 주세요:

2024.08.11 - [프론트엔드/Next.js] - Next.js에 i18n 적용하기 - 다국어 처리하기 (next-intl)

1. 언어 선택을 위한 공통 컴포넌트 모듈 생성

우선, 사용자가 언어를 선택할 수 있는 공통 컴포넌트를 만들어보겠습니다.

이 컴포넌트는 각 언어 옵션을 Select Box 형태로 제공하며, 사용자가 선택한 언어에 따라 애플리케이션의 로케일이 변경되도록 합니다.

// /src/components/LocaleSwtich.tsx

import {useLocale, useTranslations} from 'next-intl';
import LocalSwitchSelect from './LocalSwitchSelect';
import {locales} from '@/config';

export default function LocaleSwitch() {
  const t = useTranslations('LocaleSwitcher');
  const locale = useLocale();

  return (
    <LocalSwitchSelect defaultValue={locale}>
      {locales.map((cur) => (
        <option key={cur} value={cur}>
          {t('locale', {locale: cur})}
        </option>
      ))}
    </LocalSwitchSelect>
  );
}

이 컴포넌트는 next-intl의 useLocale과 useTranslations 훅을 사용하여 현재 로케일과 번역 함수를 가져옵니다. 그 후, locales 배열에 있는 각 로케일을 Select Box의 옵션으로 렌더링합니다.

이 전 글에서 LocaleSwitcher의 locale에 대한 json을 미리 정의해두었는데요. 이 부분을 다시 확인해보겠습니다.

{
  "Home": {
    "welcome": "Welcome to our website!",
    "content": "This website was built using React and React-Router."
  },
  "LocaleSwitcher": {
    "label": "Change language",
    "locale": "{locale, select, en {🇺🇸 English} ko {🇰🇷 Korean} jp {🇯🇵 Japanese} other {Unknown}}"
  }
}

LocaleSwtich.tsx 파일에서 사용한 t('locale', {locale: cur})는 ICU 메시지 포맷에서 사용하는 선택 포맷(Select Format)입니다. 이 포맷은 특정 변수(locale)의 값을 기준으로 메시지를 다르게 표시할 수 있도록 합니다. 선택된 로케일에 따라 적절한 언어 이름(예: "English", "한국어")을 번역하여 표시하는 역할을 합니다.

locale이라는 변수를 기준으로, 그 값이 특정 언어 코드와 일치할 때 해당하는 메시지를 선택합니다.
{locale, select, ...} 부분은 선택 포맷을 나타냅니다.
en, ko, jp 등은 locale의 가능한 값들을 나타내고, 그에 따라 각각 다른 메시지(🇺🇸 English, 🇰🇷 Korean, 🇯🇵 Japanese)가 선택됩니다.
other는 locale 값이 지정된 값들 중 어느 것과도 일치하지 않을 때 사용할 메시지를 지정합니다. 이 경우 Unknown이라는 메시지가 표시됩니다.

예를 들어, locale 변수가 ko일 경우, 이 구문은 "🇰🇷 Korean"이라는 메시지를 반환하게 됩니다.

2. LocaleSwitchSelect.tsx 컴포넌트 구현

이제, 실제로 언어를 변경하는 로직을 처리하는 LocaleSwitchSelect 컴포넌트를 구현해 보겠습니다.

// /src/components/LocaleSwitchSelect.tsx 

'use client';

import {ChangeEvent, ReactNode, useTransition} from 'react';
import {Locale} from '@/config';
import {useRouter, usePathname} from '@/navigation';

type Props = {
  children: ReactNode;
  defaultValue: string;
};

export default function LocaleSwitchSelect({children, defaultValue}: Props) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const pathname = usePathname();

  function onSelectChange(event: ChangeEvent<HTMLSelectElement>) {
    const nextLocale = event.target.value as Locale;
    startTransition(() => {
      router.replace({pathname}, {locale: nextLocale});
    });
  }

  return (
    <label>
      <select
        defaultValue={defaultValue}
        disabled={isPending}
        onChange={onSelectChange}
      >
        {children}
      </select>
    </label>
  );
}

이 컴포넌트는 사용자가 Select Box에서 언어를 선택했을 때 해당 언어로 애플리케이션의 로케일을 변경합니다. startTransition 함수를 사용하여 라우터의 상태 변경 작업을 처리하며, 페이지를 새로 고침하지 않고도 URL의 로케일 부분을 업데이트합니다.

useTransition: 상태 업데이트가 완료될 때까지 Select Box를 비활성화하는 데 사용됩니다.
useRouter와 usePathname: 현재 경로 정보를 가져오고, 새로운 로케일로 URL을 업데이트하는 데 사용됩니다.
onSelectChange: 사용자가 언어를 선택했을 때 호출되는 이벤트 핸들러입니다.

3. 이제 이전 글에서 만든 [locale]/page.tsx에 컴포넌트를 추가하고 언어가 변경되는지 확인해보겠습니다.

'use client';

import {useTranslations} from 'next-intl';
import LocaleSwitch from '@/components/LocaleSwitch';

export default function Home() {
  const t = useTranslations('Home');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <h4>{t('content')}</h4>

      <LocaleSwitch />
    </div>
  );
}

alt text

Select Box를 통해 언어를 선택하면 선택한 언어로 문구가 변경되는 것을 확인할 수 있습니다.

이 글을 통해 Next.js에서 다국어 처리와 언어 변경 Select Box 구현에 대해 도움이 되셨으면 좋겠습니다.