Next.js에서 다국어 지원

다국어를 지원하는 서비스에서 언어별로 화면을 만드는 것은 불필요한 반복이 생기는 업무이며 관리 또한 어려워집니다. Next.js에서는 다국어를 손쉽게 지원할 수 있는 라이브러리를 지원하며 추가로 이를 동적으로 수정/반영할 수 있습니다.

오늘은 다국어 지원과 언어별로 동적으로 반영할 수 있는 Crowdin 툴이 사용되는 방법까지 알아보겠습니다.

 

Next.js에서 다국어 지원을 하는 경우 I18n이라는 명칭을 사용하고 있습니다.  I18n은 'Internationalization'의 줄임말로, 첫 글자 'I'와 마지막 글자 'n' 사이에 18개의 글자가 있다는 의미입니다. 이는 긴 단어를 간단하게 표현하는 방법으로, 개발자들 사이에서 널리 사용되는 관행입니다.

 

국제화의 주요 목표는 다음과 같습니다:

• 다국어 지원을 위한 코드 구조 설계
• 문자열 추출 및 외부화
• 날짜, 시간, 숫자 형식의 유연한 처리
• 다양한 문자 인코딩 지원
• 양방향 텍스트 지원 (예: 아랍어, 히브리어)

Next.js에서 국제화 구현하기

Next.js는 v10.0.0부터 국제화(i18n) 라우팅을 기본적으로 지원합니다. 이를 통해 개발자는 쉽게 다국어 웹사이트를 구축할 수 있습니다.

 

1. 다국어 지원 설정 방법

Next.js에서 다국어 지원을 설정하는 방법은 다음과 같습니다:

 

1. next.config.js 파일에 i18n 설정 추가:

module.exports = {
  i18n: {
    locales: ['en', 'ko', 'ja'],
    defaultLocale: 'ko',
  },
}

 

2. 언어별 번역 파일 생성:
public/locales 디렉토리에 각 언어별 JSON 파일을 생성합니다.

public/
  locales/
    en/
      common.json
    ko/
      common.json
    ja/
      common.json

 

3. next-i18next 라이브러리 설치 및 설정:

npm install next-i18next

 

 

next-i18next.config.js 파일 생성:

module.exports = {
  i18n: {
    defaultLocale: 'ko',
    locales: ['en', 'ko', 'ja'],
  },
}

 

4. _app.js에서 appWithTranslation HOC 사용:

import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

 

2. 동적 라우팅을 활용한 언어 전환

Next.js의 i18n 라우팅을 사용하면, URL 경로에 언어 코드를 포함시켜 동적으로 언어를 전환할 수 있습니다.

 

1. 링크를 사용한 언어 전환:

import Link from 'next/link'
import { useRouter } from 'next/router'

function LanguageSwitcher() {
  const router = useRouter()
  
  return (
    <div>
      <Link href={router.asPath} locale="en">
        <a>English</a>
      </Link>
      <Link href={router.asPath} locale="ko">
        <a>한국어</a>
      </Link>
      <Link href={router.asPath} locale="ja">
        <a>日本語</a>
      </Link>
    </div>
  )
}

 

2. 프로그래매틱 언어 전환:

import { useRouter } from 'next/router'

function LanguageSwitcher() {
  const router = useRouter()
  
  const changeLanguage = (locale) => {
    router.push(router.pathname, router.asPath, { locale })
  }
  
  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ko')}>한국어</button>
      <button onClick={() => changeLanguage('ja')}>日本語</button>
    </div>
  )
}

 

결론

Next.js에서 국제화(i18n)를 구현하는 것은 내장 기능과 다양한 라이브러리의 도움으로 비교적 간단합니다. 동적 라우팅을 활용한 언어 전환 기능은 사용자 경험을 향상시키고, SEO에도 긍정적인 영향을 미칩니다.

국제화는 단순히 텍스트를 번역하는 것 이상의 의미를 가집니다. 날짜 형식, 숫자 표기법, 통화 등 다양한 문화적 차이를 고려해야 하며, 이를 통해 전 세계 사용자에게 더 나은 서비스를 제공할 수 있습니다.

 

동적 배포를 위한 Crowdin 적용

Next.js 애플리케이션에서 다국어 지원은 글로벌 사용자 경험을 향상시키는 중요한 요소입니다. Crowdin은 이러한 다국어 지원 프로세스를 효율적으로 관리할 수 있게 해주는 강력한 도구입니다. 이 글에서는 Next.js 프로젝트에서 Crowdin을 활용하여 다국어 지원을 구현하는 방법에 대해 알아보겠습니다.

 

Crowdin 소개

Crowdin은 소프트웨어 현지화를 위한 클라우드 기반 플랫폼입니다. 이 도구는 번역 프로세스를 자동화하고, 개발자와 번역가 간의 협업을 원활하게 만들어줍니다.

 

주요 특징:

• 600개 이상의 앱 및 통합 기능 제공
• 자동화된 워크플로우
• 번역 메모리 및 용어집 관리
• 실시간 협업 환경

Next.js와 Crowdin 통합하기

1. Crowdin 프로젝트 설정

먼저 Crowdin에서 새 프로젝트를 생성하고, 소스 언어와 대상 언어를 설정합니다

2. Next.js 프로젝트 설정

Next.js 프로젝트에 next-intl 라이브러리를 설치합니다.

npm install next-intl

3. Crowdin 설정 파일 생성

프로젝트 루트에 crowdin.yml 파일을 생성합니다:

project_id: 'YOUR_PROJECT_ID'
api_token_env: CROWDIN_PERSONAL_TOKEN
preserve_hierarchy: true
files:
  - source: /public/locales/en/**/*
    translation: /public/locales/%two_letters_code%/**/%original_file_name%

4. 번역 파일 관리

public/locales 디렉토리에 각 언어별 JSON 파일을 생성합니다.

4. Crowdin CLI 설치 및 사용

Crowdin CLI를 설치하고 번역 파일을 동기화합니다:

npm install -g @crowdin/cli
crowdin upload sources
crowdin download

 

자동화된 워크플로우 구축

1. CI/CD 파이프라인 설정

GitHub Actions 등을 사용하여 자동화된 번역 동기화 워크플로우를 구축합니다.

name: Crowdin Sync

on:
  push:
    branches: [ main ]

jobs:
  synchronize-with-crowdin:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: crowdin action
        uses: crowdin/github-action@1.4.9
        with:
          upload_sources: true
          upload_translations: false
          download_translations: true
          localization_branch_name: l10n_crowdin_action
          create_pull_request: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

2. 실시간 번역 업데이트

Crowdin의 Over-the-air 기능을 활용하여 실시간으로 번역을 업데이트할 수 있습니다.

 

번역 품질 관리

Crowdin은 다양한 기능을 통해 번역 품질을 향상시킵니다:

• 번역 메모리: 일관된 번역을 유지
• 용어집: 주요 용어의 일관성 보장
• 기계 번역 및 인간 번역의 조합: 효율성과 정확성 향상

결론

Crowdin을 Next.js 프로젝트에 통합함으로써, 다국어 지원 스크립트를 수정하여 웹에 즉각적으로 적용할 수 있으며 번역과 문구를 지정함에 있어 유관부서와 함께 소통하며 업무를 수행할 수 있는 환경을 만들 수 있습니다.