i18next는 웹 애플리케이션을 여러 언어로 쉽게 번역할 수 있게 해주는 인기 있는 국제화 라이브러리입니다. 전 세계 사용자들을 지원하려는 React 및 Next.js 개발자들에게 훌륭한 선택입니다. 이 기사에서는 i18next가 React 및 Next.js 애플리케이션과 어떻게 쉽게 통합되는지 살펴보겠습니다.
먼저, i18next에 대한 간단한 개요부터 시작하겠습니다. 이것은 번역을 로드하고 관리하기 위한 간단한 API를 제공하는 JavaScript 라이브러리입니다. React 및 Next.js를 포함한 다양한 프론트엔드 프레임워크와 함께 사용할 수 있습니다. i18next는 복수형, 문맥, 보간과 같은 다양한 기능을 기본 제공한다. 이것은 또한 JSON 파일과 백엔드 API를 포함한 다양한 소스에서 번역을 로드하는 것을 지원합니다.
i18next를 React 또는 Next.js 애플리케이션에 통합하려면 먼저 설치해야 합니다. 이것은 npm 또는 yarn을 사용하여 다음 명령어를 실행하면 됩니다:
npm install i18next
또는
yarn add i18next
i18next를 설치한 후에는 애플리케이션에서 사용할 수 있습니다. i18next를 React와 함께 사용하는 가장 쉬운 방법 중 하나는 다음과 같습니다. useTranslation 후크. 이 훅은 번역을 로드하고 컴포넌트 내에서 텍스트를 번역하는 편리한 방법을 제공합니다.
다음은 사용하는 방법의 예입니다. useTranslation React 컴포넌트에서 훅 사용하기
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
이 예제에서는 다음을 가져오고 있습니다. useTranslation 훅에서부터 react-i18next 패키지. 그런 다음 우리는 그것을 사용하여 번역을 로드하고 번역 함수(t컴포넌트 내에서 텍스트를 번역하는 데 사용할 수 있는 것.
그럼 우리는 그것을 사용할 수 있습니다 t 번역하는 함수 title 그리고 description 우리 번역 파일의 문자열들. 번역 파일은 다음과 같은 JSON 파일일 수 있습니다:
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC는 i18next FluentC 플러그인을 사용하여 여러 언어를 자동으로 빌드할 수 있습니다.
이 예제에서는 영어와 프랑스어 두 가지 번역이 있습니다. 우리는 이러한 번역들을 우리의 애플리케이션에 로드할 수 있습니다. i18next 도서관
번역을 로드하려면, 우리는 다음을 사용할 수 있습니다. i18next 객체와 그것의 init 함수. 여기 예시가 있습니다.
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
이 예제에서는 JSON 파일에서 영어와 프랑스어 번역을 가져오고 있습니다. 그런 다음 이 번역들을 사용하여 i18next를 초기화하고 기본 언어를 영어로 설정하고 있습니다. 우리는 또한 변수들을 번역에 사용할 수 있도록 보간 설정을 구성하고 있습니다.
번역을 로드하고 i18next를 설정한 후에는 사용할 수 있습니다 useTranslation 컴포넌트 내에서 텍스트를 번역하기 위한 훅
Next.js 애플리케이션에서는 i18next를 통합하는 데 동일한 방법을 사용할 수 있습니다. 번역을 로드할 수 있습니다 getStaticProps 또는 getServer