Next.js와 i18next를 사용한 다국어 사이트 구축(3): 다국어 지원 기능 추가

다국어 지원 기능 추가

Next.js와 i18next를 사용한 다국어 지원과 SSR 통합을 시각적으로 설명

3.1 i18next로 다국어 지원 구현

i18next 설치 및 설정

• i18next는 React 애플리케이션에서 다국어 지원을 쉽게 구현할 수 있는 라이브러리입니다. Next.js에서도 next-i18next 패키지를 통해 SSR과 함께 사용할 수 있습니다.
• 설치 명령:

  npm install i18next react-i18next next-i18next i18next-http-backend

 

기본 다국어 파일 생성

• 각 언어에 대한 번역 파일을 생성하여 다국어 지원을 구현합니다. locales 폴더에 각 언어별 폴더를 생성하고, 각 폴더 안에 translation.json 파일을 추가합니다.
• 예시 파일 구조:

  /locales
    /en
      translation.json
    /ko
      translation.json

• 예시: locales/en/translation.json:

  {
    "welcome": "Welcome to our website",
    "description": "This is a simple Next.js app with i18next"
  }

• 예시: locales/ko/translation.json:

  {
    "welcome": "우리 웹사이트에 오신 것을 환영합니다",
    "description": "이것은 i18next가 적용된 간단한 Next.js 앱입니다"
  }

다국어 번역 적용을 위한 컴포넌트와 훅 사용

• useTranslation 훅을 사용하여 컴포넌트 내에서 다국어 텍스트를 쉽게 처리할 수 있습니다.
• 예시: 번역 적용 컴포넌트:

  import { useTranslation } from 'react-i18next';
  
  const HomePage = () => {
    const { t } = useTranslation();
    
    return (
      <div>
        <h1>{t('welcome')}</h1>
        <p>{t('description')}</p>
      </div>
    );
  };
  
  export default HomePage;

   
• useTranslation 훅 설명:
  • useTranslation 훅은 t 함수를 반환하며, 이 함수는 번역 키를 사용하여 번역된 텍스트를 반환합니다.
  • t('key') 형식으로 번역된 텍스트를 불러오며, 키는 번역 파일에서 정의된 값입니다.

 

---

3.2 SSR과 i18next 통합

Next.js에서 SSR을 활용하여 언어 설정 로직 구현

• **서버 사이드 렌더링(SSR)**과 i18next를 통합하여, 사용자의 요청에 따라 서버에서 언어 설정을 처리할 수 있습니다. 이 과정에서 next-i18next와 SSR을 함께 사용하여 클라이언트의 언어를 감지하고, 적절한 언어로 페이지를 렌더링합니다.

서버에서 클라이언트의 언어 감지 및 리다이렉션 처리

• getServerSideProps 함수를 사용하여 서버에서 클라이언트의 언어를 감지하고, 사용자의 브라우저 언어에 맞는 페이지를 렌더링할 수 있습니다.
• 예시: pages/index.js에서 getServerSideProps 활용:

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  export const getServerSideProps = async ({ locale }) => {
    return {
      props: {
        ...(await serverSideTranslations(locale, ['common'])),
      },
    };
  };
  
  const HomePage = () => {
    return (
      <div>
        <h1>Welcome to our multilingual site</h1>
      </div>
    );
  };
  
  export default HomePage;

• getServerSideProps 설명:
  • getServerSideProps 함수는 서버 사이드에서 페이지 요청을 처리하여, 언어 감지 및 리다이렉션과 같은 로직을 수행할 수 있습니다.
  • 여기서는 locale 값을 사용하여 서버에서 번역된 데이터(serverSideTranslations)를 가져옵니다.

 

서버에서 언어 감지 및 리다이렉션

• 사용자의 브라우저 언어 설정에 맞춰 자동 리다이렉션을 설정할 수 있습니다. 서버에서 Accept-Language 헤더를 감지하여 사용자에게 적합한 언어로 리다이렉트하는 방식입니다.
• 예시: 브라우저 언어 감지 및 리다이렉션:

  export const getServerSideProps = async ({ req, locale }) => {
    const acceptLanguage = req.headers['accept-language'];
  
    // 브라우저 언어가 한국어일 경우 리다이렉션 처리
    if (acceptLanguage.startsWith('ko')) {
      return {
        redirect: {
          destination: '/ko',
          permanent: false,
        },
      };
    }
  
    return {
      props: {
        ...(await serverSideTranslations(locale, ['common'])),
      },
    };
  };

• 언어 감지 설명:
  • req.headers['accept-language']를 사용하여 클라이언트 브라우저의 언어 설정을 가져오고, 이를 바탕으로 서버에서 적절한 언어로 리다이렉션할 수 있습니다.

 

---

이 단계에서는 i18next로 다국어 지원을 구현하고, SSR을 통해 서버에서 클라이언트의 언어를 감지하여 적절한 페이지를 제공하는 방법을 배웁니다. 서버에서 언어 감지 및 리다이렉션을 처리함으로써, 사용자 맞춤형 경험을 제공합니다.