🌐 next-intl의 ICU messages 사용하기

Tip 💡 이 포스트는 next-intl에 대한 사전지식이 있는 분을 대상으로 작성되었습니다.
next-intl을 시작하는 방법은 아래 포스트를 참고해 주세요.
🌐 Next.js에서 다국어 지원하기 (next-intl)

next-intl에서는 useTranslations()를 사용해 아래와 같이 json 파일에 있는 텍스트(메세지)를 불러올 수 있습니다.

import {useTranslations} from 'next-intl';
 
export default function Index() {
  const t = useTranslations('Index');
  return <h1>{t('title')}</h1>;
}

위의 예시는 메세지를 사용하는 가장 기본적인 방법(Static messages)이며, next-intl는 이 외에도 다양한 방법을 제공합니다.
이 포스트에서는 ICU message를 사용하는 방법들을 소개해 보겠습니다.

참고 자료 📑
next-intl Docs > Usage guide > Messages

Interpolation of dynamic values

Dynamic value를 넣어서 사용할 수 있습니다.

저는 이번에 copyright footer를 만들면서 현재 연도를 보여줄 수 있도록 연도 부분을 dynamic value로 사용해 보았습니다.

과정

1. json 파일에 dynamic value를 {} 안에 작성해 주세요.

// messages/en.json

"Footer": {
  "copyright": "© Hailey Kim {year}"
}

2. 메세지를 사용할 파일에서 useTranslations()으로 가져오세요.
   (저는 상위 컴포넌트에서 const t = useTranslations('Footer');로 가져오고 t를 props로 넘겨주었습니다.).

3. t() 안에 (키 값, dynamic value)를 작성해 주세요.
   (dynamic value는 object로 감싸서 넘겨주셔야 합니다. {value 이름: 값})

// components/common/footer.tsx

import { Translation } from '@/types/intl';

export default function Footer({ t }: { t: Translation }) {
    const year = new Date().getFullYear();

    return (
        <footer className="mt-20 w-72 mx-auto">
            {t('copyright', { year })}
        </footer>
    );
}

📌 저는 t를 props로 넘겨주었고 타입스크립트를 쓰기 때문에 타입을 명시해야 돼서 아래와 같이 useTranslations()의 리턴 값(t)에 대한 타입을 따로 작성하고 footer에 import 하여 사용했습니다.

// types/intl.ts

import { TranslationValues, Formats } from 'next-intl';

export type Translation = {
    <TargetKey>(
        key: TargetKey,
        values?: TranslationValues | undefined,
        formats?: Partial<Formats> | undefined
    ): string;
};

결과

아래와 같이 현재 연도(2024)가 잘 나오는 것을 볼 수 있습니다.