Next.js와 i18next를 사용한 다국어 사이트 구축(4): 페이지별 다국어 처리 및 레이아웃 구성

페이지별 다국어 처리 및 레이아웃 구성

Next.js와 i18next를 사용한 다국어 웹사이트의 언어 전환 기능과 페이지 구성

4.1 다국어 페이지 구성

예시: 홈페이지, 소개 페이지, 서비스 페이지 다국어 구현

다국어 페이지를 구성하기 위해 각 페이지에서 i18next를 활용해 번역된 텍스트를 표시하고, SSR을 통해 서버에서 번역된 데이터를 제공할 수 있습니다.

홈페이지 구현

• pages/index.js 파일에서 useTranslation 훅을 사용해 다국어 번역을 적용합니다.

import { useTranslation } from 'react-i18next';

const HomePage = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
};

export const getServerSideProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});

export default HomePage;

• SSR 활용: getServerSideProps를 사용하여 사용자의 언어에 맞춰 서버에서 번역된 데이터를 가져옵니다.

소개 페이지 구현

• **pages/about.js**에서 동일한 방식으로 다국어를 적용합니다.

import { useTranslation } from 'react-i18next';

const AboutPage = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('about_title')}</h1>
      <p>{t('about_description')}</p>
    </div>
  );
};

export const getServerSideProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});

export default AboutPage;

서비스 페이지 구현

• **pages/services.js**에서 서비스 관련 정보를 각 언어로 번역하여 보여줄 수 있습니다.

  import { useTranslation } from 'react-i18next';
  
  const ServicesPage = () => {
    const { t } = useTranslation();
  
    return (
      <div>
        <h1>{t('services_title')}</h1>
        <p>{t('services_description')}</p>
      </div>
    );
  };
  
  export const getServerSideProps = async ({ locale }) => ({
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  });
  
  export default ServicesPage;

• 각 페이지에서 SSR을 활용하여 언어별로 번역된 텍스트를 서버에서 렌더링하고, 사용자가 해당 언어로 페이지를 볼 수 있도록 설정합니다.

---

4.2 다국어 네비게이션 바 및 언어 전환 기능

언어 선택 드롭다운 메뉴 구현

다국어 지원을 위해 언어 선택 드롭다운 메뉴를 네비게이션 바에 추가합니다.

언어 선택 드롭다운 메뉴 예시

import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';

const LanguageSwitcher = () => {
  const router = useRouter();
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    router.push(router.pathname, router.asPath, { locale: lng });
  };

  return (
    <select
      value={i18n.language}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="ko">한국어</option>
    </select>
  );
};

export default LanguageSwitcher;

• **useRouter**를 사용하여 현재 경로를 가져오고, 언어를 변경할 때 router.push를 활용해 해당 언어로 페이지를 다시 로드합니다.
• 드롭다운 메뉴에서 사용자가 언어를 선택할 수 있으며, changeLanguage 함수에서 선택한 언어로 전환합니다.

언어 전환 시 페이지 리로드 없이 전환 구현

언어 전환 시 페이지 전체를 리로드하지 않고 URL의 locale 값을 변경하여 사용자가 선택한 언어에 맞는 페이지를 즉시 로드할 수 있습니다.

router.push와 locale 활용

• **router.push**를 사용하여 현재 페이지 경로와 언어 코드를 함께 전달합니다.
• 예시:

  router.push(router.pathname, router.asPath, { locale: lng });

• 이 방식으로 언어가 변경되면 페이지가 새로고침되지 않고 현재 경로를 유지한 채로 언어가 바뀐 텍스트만 업데이트됩니다.

---

이 단계에서는 페이지별로 다국어 번역을 적용하고, SSR을 통해 서버에서 각 언어에 맞춘 페이지를 제공하는 방법을 배웁니다. 또한 언어 전환 드롭다운 메뉴를 구현하여 페이지 리로드 없이 언어를 전환할 수 있도록 설정합니다.