Next.js i18n 알아보기!

KUKJIN LEE • 10개월 전 작성

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

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

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

사용법

next-i18next를 사용하여 i18n 설정 파일을 생성합니다. (next-i18next.config.js)
필요한 언어 파일을 생성하고 해당 언어에 따라 컨텐츠를 작성합니다.
페이지나 컴포넌트에서 useTranslation 훅을 사용하여 다국어 컨텐츠를 가져와 사용합니다.

설치

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

Next.js 프로젝트를 생성하거나 기존 프로젝트로 이동합니다.
터미널에서 다음 명령어를 실행하여 next-i18next 패키지를 설치합니다.

npm install next-i18next

폴더 구조

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

pages 기반에서는 src/locales/en || src/locales/jp 와 같은 구조를 권장 드립니다.
next.js13 app directory를 사용할 경우, public/locales/en || public/locales/jp 와 같은 구조를 권장 드립니다.

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

번역 파일 작성

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

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

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

번역 파일 적용

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

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

import { useTranslation } from 'next-i18next';

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

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

장점

Next.js의 국제화(i18n) 기능은 글로벌 시장을 목표로 하는 웹 애플리케이션 개발에 있어 중요한 장점을 제공합니다. 주요 이점은 다음과 같습니다:

다국어 지원 간편화: Next.js의 i18n 설정은 다양한 언어로 컨텐츠를 효율적으로 관리하고 표시할 수 있는 기능을 제공합니다. 이는 웹사이트나 애플리케이션에서 여러 언어를 지원해야 하는 경우, 콘텐츠를 쉽게 추가하고 관리할 수 있게 해줍니다.
SEO 최적화: Next.js는 각 언어별로 독립된 URL을 제공하며, 언어별 메타데이터 관리를 용이하게 합니다. 이는 검색 엔진 최적화(SEO)에 큰 이점을 제공하며, 다양한 언어를 사용하는 사용자들에게 콘텐츠를 효과적으로 도달시킬 수 있게 해줍니다.
국제 시장 진출 용이: 다양한 언어를 지원함으로써, 애플리케이션을 국제 시장에 더 적합하게 만들 수 있습니다. 이는 글로벌 사용자 기반을 확장하고, 다양한 국가와 문화권의 사용자들에게 애플리케이션을 쉽게 접근할 수 있게 해줍니다.

Next.js의 i18n 기능을 통해 개발자들은 다국어 지원 웹 애플리케이션의 구축과 관리를 보다 쉽고 효율적으로 할 수 있으며, 글로벌 시장에서의 경쟁력을 강화할 수 있습니다.

Next.js i18n 알아보기!

사용법

설치

폴더 구조

번역 파일 작성

번역 파일 적용

장점

New Tech Posts

추천 도서

Our Channels