코어 라이브러리

next-intl은 주로 Next.js 앱에서 사용하도록 설계되었지만, 코어는 프레임워크 비종속적이며 독립적으로 사용할 수 있습니다. 즉, React 앱이나 다른 모든 JavaScript 환경에서도 사용할 수 있습니다.

React 앱

next-intl은 내부적으로 use-intl이라는 라이브러리를 사용합니다. 이 코어 라이브러리에는 next-intl에서 익숙한 대부분의 기능이 포함되어 있지만, 아래의 Next.js 전용 기능은 없습니다:

라우팅 API
Server Actions, Metadata, Route Handlers를 위한 await 가능한 API
i18n/request.ts와 함께 제공되는 Server Components 통합

만약 Next.js 외부의 React 앱에서도 Server Components가 정착된다면, 향후 Server Components 지원이 코어 라이브러리로 이동할 수 있습니다.

반대로 use-intl에는 일반적인 React 앱에서 i18n을 처리하는 데 필요한 모든 API가 포함되어 있습니다:

메시지 번역을 위한 useTranslations
숫자, 날짜 및 시간, 리스트 포매팅을 위한 useFormatter
설정 API (use-intl에서는 NextIntlProvider가 IntlProvider라는 점에 유의)

이를 통해 다른 환경에서도 next-intl에서 익숙한 동일한 API를 사용할 수 있습니다:

React 앱(예시)
React Native
Jest 같은 테스트 환경(예시)
Storybook

기본 사용법:

    import {IntlProvider, useTranslations} from 'use-intl';

    // You can get the messages from anywhere you like. You can also
    // fetch them from within a component and then render the provider
    // along with your app once you have the messages.
    const messages = {
      App: {
        hello: 'Hello {username}!'
      }
    };

    function Root() {
      return (
      );
    }

    function App({user}) {
      const t = useTranslations('App');
      return <h1>{t('hello', {username: user.name})}</h1>;
    }

Next.js와 일반 React 앱 모두에서 동작하는 공유 컴포넌트를 만들 수 있나요?

네, 어느 환경에서든 렌더링되는 공유 컴포넌트를 지원합니다.

이 경우, 해당 컴포넌트에서는 next-intl에서 import하는 것이 유리할 수 있습니다. Next.js에서 렌더링할 때 Server Components 통합의 이점을 얻을 수 있기 때문입니다. 다른 환경에서도 next-intl로의 import는 정상 동작하지만, IntlProvider가 존재해야 합니다.

비React 앱

React 전용 API 외에도 use-intl은 모든 JavaScript 환경에서 사용할 수 있는 두 가지 저수준 함수를 내보냅니다:

메시지 번역을 위한 createTranslator
숫자, 날짜 및 시간, 리스트 포매팅을 위한 createFormatter

이 API들은 필요한 모든 설정을 직접 전달받으며 전역 설정에 의존하지 않습니다.

다음과 같이 이 API들을 사용할 수 있습니다:

    import {createTranslator, createFormatter} from 'use-intl/core';

    const messages = {
      basic: 'Hello {name}!',
      rich: 'Hello <b>{name}</b>!'
    };

    // This creates the same function that is returned by `useTranslations`.
    // Since there's no provider, you can pass all the properties you'd
    // usually pass to the provider directly here.
    const t = createTranslator({locale: 'en', messages});

    // Result: "Hello world!"
    t('basic', {name: 'world'});

    // To generate HTML markup, you can consider using the `markup`
    // function which in contrast to `t.rich` returns a markup string.
    t.markup('rich', {
      name: 'world',
      b: (chunks) => `<b>${chunks}</b>`
    });

    // Creates the same object that is returned by `useFormatter`.
    const format = createFormatter({locale: 'en'});

    // Result: "Oct 17, 2022"
    format.dateTime(new Date(2022, 9, 17), {dateStyle: 'medium'});