close

국제화(i18n) 구현 Next.js: 다국어

이 섹션에서는 애플리케이션에 국제화(i18n)를 구현하는 과정을 안내합니다 Next.js. i18n을 사용하면 사용자를 위한 다국어 경험을 만들고 언어별 콘텐츠를 제공할 수 있습니다.

next-i18next 도서관 이용

next-i18next 애플리케이션 에서 i18n을 구현하는 데 널리 사용되는 라이브러리입니다 Next.js. 애플리케이션에 i18n을 추가하는 방법은 다음과 같습니다.

설치 next-i18next:

npm install next-i18next

파일 에서 라이브러리를 구성합니다 next.config.js.

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};

다음 이름의 구성 파일을 만듭니다 next-i18next.config.js.

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};

애플리케이션에서 라이브러리를 사용하십시오.

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}

다국어 콘텐츠 제작

를 설치 한 후, , next-i18next 같은 언어 파일을 생성하여 각 언어로 콘텐츠를 제공할 수 있습니다. en.json fr.json es.json 

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}

언어 전환

언어 전환을 허용하려면 언어 전환 도구를 만들고 다음 i18n.changeLanguage 기능을 사용할 수 있습니다.

 

import { useTranslation } from 'next-i18next';  
  
function LanguageSwitcher() {  
  const { i18n } = useTranslation();  
  
  const handleChangeLanguage =(newLanguage) => {  
    i18n.changeLanguage(newLanguage);  
  };  
  
  return( 
    <div>  
      <button onClick={() => handleChangeLanguage('en')}>English</button>  
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>  
      <button onClick={() => handleChangeLanguage('es')}>Español</button>  
    </div>  
 );  
}

결론

Next.js 이 섹션에서는 라이브러리를 사용하여 애플리케이션 에서 국제화(i18n)를 구현하는 프로세스를 소개했습니다 next-i18next. 언어별 콘텐츠를 제공하고 사용자가 언어를 전환할 수 있도록 함으로써 사용자에게 매력적인 다국어 경험을 제공할 수 있습니다.