[Next] Internationalization with next-translate-plugin, i18next in NEXT13

처음 프로젝트를 시작할 때 Next13버전의 App dir은 Stable하지 않다는 이유로, App dir가 아닌 Pages dir를 사용하여 페이지 라우팅을 진행했었다.

 

이후 기획의 변경으로 프로젝트에 다국어를 지원해야 하는 상황에 직면했다.

 

이전에 했던 프로젝트 중에 다국어를 적용했었던 경험이 있어 어렵지 않게 적용할 수 있다고 생각했는데, Next13에서는 꽤나 많은 삽질을 하게 되었다.... (30분이면 틀은 잡아놓을 수 있다고 생각했었는데, 동작을 하지 않아 이틀을 날려먹었던 ㅎㅎ)

처음 다국어를 지원하기 위해 사용한 라이브러리는 next-translate이다. 

 

nextJS의 공식문서에 Internationalization 관련 section이 있었고 locale 관련하여 기능을 제공해 주는 것 같았다. 이를 이용하여 클라이언트쪽에서 json파일로 text를 관리하기 위해 next-translate를 설치하였다. 

 

next.config.js 파일을 수정해준 뒤 빌드를 진행하니 devDependancy로 next-translate-plugin을 설치한 뒤 해당 모듈을 export하라는 경고문이 나타났다.

 

const nextTranslate = require('next-translate-plugin')

module.exports = nextTranslate()

따라서 시키는 대로 진행했다.

{
  "locales": ["en", "ca", "es"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home", "example"],
    "/about": ["about"]
  }
}

i18n 파일도 root에 추가해주었고,

 

.
├── ca
│   ├── common.json
│   └── home.json
├── en
│   ├── common.json
│   └── home.json
└── es
    ├── common.json
    └── home.json

locales 디렉토리에 각 언어에 맞는 json 파일도 알맞게 생성해주었다..

 

 

import useTranslation from 'next-translate/useTranslation'

export default function ExamplePage() {
  const { t, lang } = useTranslation('common')
  const example = t('variable-example', { count: 42 })

  return <div>{example}</div> // <div>Using a variable 42</div>
}

 

이후 위와 같이 사용했는데, 전혀 적용이 안 되고 있었다.

 

심지어

 

import React from 'react'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import i18nConfig from '../i18n.json'

const { locales } = i18nConfig

export default function ChangeLanguage() {
  const { t, lang } = useTranslation()

  return locales.map((lng) => {
    if (lng === lang) return null

    return (
      <Link href="/" locale={lng} key={lng}>
        {t(`layout:language-name-${lng}`)}
      </Link>
    )
  })
}

라우팅 시 local이 변경되도록 작성해준 뒤, 테스트했을 때 locale이 계속 undefined로 정의되고 있었다...

 

위와 같은 문제들이 동시에 나타나고 있었지만, 원인이 무엇인지 전혀 짐작할 수 없었고 어떤식으로 디버깅을 해야할 지 감이 안 오는 상태였다.

 

next-translate 공식 문서를 천천히 다시 읽어보았다.

 

NEXT13 버전에서는 APP 디렉토리 관련 라우팅만 지원해준다는 것 같았다. 

 

이제와서 프로젝트 구조를 엎기에는 일정에 차질이 있었고, 사용할만한 다른 라이브러리를 찾아보기 시작했다.

 

 

 

i18n-next

 

위에서 locales가 undefined로 정의된다는 이슈가 있었는데, next.config.js에서 설정을 해줘야 사용할 언어들이 locales에 들어갈 수 있었다.

 

공식문서에서는 

 

 

위와 같이 설정을 해주면 된다고 나와있었지만, 이상하게 router 객체의 locales에 내가 설정한 언어들이 나타나지 않았고,

 

nextConfig 객체 안에 

 

i18n: {

locales: ["en", "sp", "du", "ge"],

defaultLocale: "en",

},

i18n 객체를 위와 같이 정의해주니 

 

내가 설정한 locales가 잘 적용되어 나타났다. 

 

이후 i18n-next의 사용 방법은 next-translate와 거의 일치했다. 

한 가지 차이가 있다면 locales 폴더를 public폴더 안에다가 넣어주어야한다. (디폴트)

 

추후 하게 될 프로젝트에서도 다국어를 지원해야 한다면 앞으로는 더 이상 헤매지 않기 ^~^