Next.js i18n (한국어)

Next.js는 React 기반의 프레임워크로 다국어 지원(i18n)을 간편하게 구현할 수 있습니다. 폴더 구조, 번역 파일 작성 위치, 샘플 데이터를 활용해 방법을 살펴보겠습니다.

기본적인 번역에는 문제가 없고, 필요, 필수 단어에서 사용은 추천드리지만, 우리가 생각하는 다국어 사이트를 만들기 위해서는 다소 제한이 있다고 느껴졌습니다.

(정확하게 설명 드리자면, 제한은 없습니다. 손이 정말 많이 갑니다.)

사용법

  1. next-i18next를 사용하여 i18n 설정 파일을 생성합니다. (next-i18next.config.js)

  2. 필요한 언어 파일을 생성하고 해당 언어에 따라 컨텐츠를 작성합니다.

  3. 페이지나 컴포넌트에서 useTranslation 훅을 사용하여 다국어 컨텐츠를 가져와 사용합니다.


Installation

i18n은 "internationalization"의 약어로, 애플리케이션을 다국어로 지원하기 위한 기술을 의미합니다. Next.js의 i18n 기능은 애플리케이션 내에서 간편하게 다국어 컨텐츠를 관리하고 표시할 수 있도록 도와줍니다.

  1. Next.js 프로젝트를 생성하거나 기존 프로젝트로 이동합니다.

  2. 터미널에서 다음 명령어를 실행하여 next-i18next 패키지를 설치합니다.

next.js i18n

npm install next-i18next

폴더 구조

Next.js i18n을 구현할 때 폴더 구조를 잘 조직화하는 것이 중요합니다. 일반적으로 아래와 같은 구조를 사용합니다.

  1. pages 기반에서는 src/locales/en || src/locales/jp 와 같은 구조를 권장 드립니다.

  2. next.js13 app directory를 사용할 경우, public/locales/en || public/locales/jp 와 같은 구조를 권장 드립니다.

next.js i18n 폴더 구조

- public/
- src/
    - components/
    - pages/
    - locales/
        - en/
            - common.json
        - ja/
            - common.json
- next-i18next.config.js

번역 파일 작성

locales/ 폴더 안에 각 언어별 폴더를 생성하고, 해당 폴더 안에 다국어 번역 파일을 작성합니다.

  1. 각 언어 별 자료를 직접 번역해야 합니다.

/en/commone.json

{
    "안녕": "Hello",
    "세계": "World"
}

/jp/commone.json

{
    "안녕": "こんにちは",
    "세계": "世界"
}

번역 파일 적용

코드에서 t('안녕')과 같이 t 함수를 사용하여 번역된 데이터를 불러올 수 있습니다.

  1. 적용 자체 문제는 없지만, 단어별 번역을 할 경우 생각보다 문제가 많이 발생했습니다.

/pages/index.js

import { useTranslation } from 'next-i18next';

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

    return (
        <div>
        <h1>{t('안녕')}</h1>
        <p>{t('세게')}</p>
        </div>
    );
}
export default HomePage;

장점

설명

  • Name
    다국어 지원 간편화
    Type
    장점
    Description

    Next.js i18n은 다국어 컨텐츠를 효율적으로 관리하고 표시할 수 있어 다국어 지원이 용이합니다.

  • Name
    SEO 최적화
    Type
    장점
    Description

    각 언어별 URL과 메타데이터를 관리하여 검색 엔진 최적화를 강화할 수 있습니다.

  • Name
    국제 시장 진출 용이
    Type
    장점
    Description

    다양한 언어로 애플리케이션을 제공하여 국제 시장에 더 적합한 제품을 제공할 수 있습니다.

i18n

단점

설명

  • Name
    학습 곡선
    Type
    단점
    Description

    처음 사용자에게는 i18n 개념 및 설정에 대한 학습 곡선이 있을 수 있습니다.

  • Name
    번역 문제
    Type
    단점
    Description

    단어별 번역을 진행할 경우 생각보다 오역이 많습니다. 정확한 자료 제공을 위해서는 문장 관리가 필요하지만, 문장 자체를 번역하다 보니 생각 이상으로 시간이 소요됐습니다.

i18n2