Next.js에서 다국어 적용하기

Next.js에서 다국어를 적용해 보았습니다.

2023년 03월 25일 · 0 분 소요

다국어 적용하기는 현재 총 2편의 시리즈로 구성되어 있습니다.

React에서 다국어 적용하기
Next.js에서 다국어 적용하기 (현재글)

들어가며

이전 포트스트에서는 React.js에서 다국어 적용하는 방법에 대해 알아보았는데요, 이번 포스트에서 비슷한 듯 다른 Next.js 환경에서 다국어 적용하는 방법에 대해 알아보도록 하겠습니다.

다국어 설정하기

1. 패키지 설치

Next.js에서 다국어를 적용하기 위해서도 i18next 패키지 설치가 필요합니다. 아래 패키지를 설치해 줍니다.

npm i next-i18next

2. config 파일 셋팅

root에 next-i18next.config.js 파일을 생성하고, next.config.js 파일에도 추가해줍니다.

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko'],
    localeDetection: true,
    debug: process.env.NODE_ENV === 'development',
    reloadOnPrerender: process.env.NODE_ENV === 'development' && true,
  },
};

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

3. 다국어 폴더 및 파일 생성

public 폴더에 locales 폴더 생성 후, en, ko 폴더를 각각 생성해 줍니다. (더 많은 다국어를 지원한다면 필요한 만큼 폴더를 생성해 주세요!)

폴더 하위에 각 다국어 json 파일을 생성해 주면 다국어 적용을 위한 준비는 끝입니다. 각 다국어 파일에는 React.js에서와 마찬가지로 json 형식에 맞춰 "key": "value" 형태로 콘텐츠를 넣어줍니다. 두 파일의 키는 반드시 동일해야 합니다.

// en/common.json
{
  "top": {
    "title": "This is Title",
    "desc": "This is Description"
  }
}

//  ko/common.json
{
  "top": {
    "title": "이것은 제목",
    "desc": "이것은 설명문입니다."
  }
}

4. 다국어 적용하기

_app.jsx에 적용하기

전체 프로젝트에 다국어 설정을 적용하기 위하여 _app.jsx에도 appWithTranslation를 적용해 줍니다.

import { appWithTranslation } from 'next-i18next';

const ApplicationComp = () => {...}

export default appWithTranslation(ApplicationComp);

페이지 설정

컴포넌트가 아닌 페이지 생성할 때 반드시 들어가야 하는 코드입니다.

상단에 다국어 라이브러리 임포트 하기

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

하단에 다국어 적용 코드 삽입하기

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

각 페이지에 여러 개의 다국어 파일을 연결할 수 있습니다. 추가하고자 하는 다국어 아래와 같이 파일을 배열 형태로 넣어주면 됩니다.

export const getStaticProps = async ({ locale }: { locale: string }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'home', 'about'])),
    },
  };
};

api fetch 해야 할 경우에는 getServerSideProps에서 처리 해주면 됩니다.

export const getServerSideProps = async ({ locale }: { locale: string }) => {
  // fetch api

  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
      propsName : response data
    },
  };
};

컴포넌트에서 사용하기

상단에서 임포트 하기

import { useTranslation } from 'next-i18next';

t 함수 불러오기

const { t } = useTranslation('common');

// 언어 파일을 여러 개 불러와야 할 경우 배열로 넣어주기
const { t } = useTranslation(['home', 'common']);

텍스트 영역에 다국어 적용하기

// 그냥 사용하면 첫 번째 namespace(언어 파일)인 'home'을 바라봅니다. (연결된 다국어 파일이 하나일 경우 아래 방식으로 사용하면 됩니다.)
{
  t('hero.title');
}

// ns 값을 설정해 주면, 설정해 준 언어 파일을 바라봅니다. (현 코드에서는 common에 있는 키값에 접근하여 값을 가져옵니다)
{
  t('blank', { ns: 'common' });
}

// 이런 식으로 여러 개의 언어 파일을 가져올 수 있습니다.

텍스트 중간에 데이터 혹은 가변적인 텍스트를 적용해야 할 경우, json 파일에서 데이터로 처리되어야 하는 영역을 {{}} 감싸주고 그 안에 키값을 넣어줍니다. 컴포넌트에서는 호출하는 t 함수의 두 번째 인자로 해당 키값을 넣어줍니다.

"desc": 오늘은 {{date}}입니다.

{
  t('hero.title', { date: '2023년 3월 26일' });
}

마치며

이번 포스트에서는 next.js 환경에서 다국어 적용하는 방법에 대해 알아보았습니다. 요즘에는 다양한 프로젝트에서 다국어를 지원하고 있는데요, 두 편의 포스트가 프로젝트에 다국어를 적용해야 하는 여러분들께 조금이나마 도움이 되었으면 좋겠습니다.

이번에도 읽어주셔서 감사합니다 🙇‍♀️

참고문서

react-18next documentation