필요한 라이브러리를 찾았는데, 혹은 정착한 라이브러리라 하더라도 더 좋은게 있는데 놓치고 있진 않는가 확인하는 용도로 http://npmtrends.com 사이트를 이용하곤 한다.
어쩌다 다국어 관련하여 https://npmtrends.com/next-i18next-vs-next-translate 이걸 확인해보니 애정(?)하는 next-translate의 이용자 수가 미미한 것에 자극받아 귀차니즘을 무릎쓰고 이 글을 쓰게 되었다.
1. next-i18next
next.js 기반에서 가장 많이 쓰는 라이브러리고, 위의 두번째 링크를 타고 가서 봐도 알 수 있듯이 사용자 수가 급속히 늘고 있다. 나도 실제로 가장 처음으로 도입했었었다. 그렇게 몇 달 쓰다가 매 페이지마다 serverSideTranslations 이런거 넣어주는거에 현타가 와서 next-translate 테스트 후 바로 넘어가게 되었다.
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import { useTranslation } from "next-i18next"
function Page () {
const { t } = useTranslation("button")
return (
<div>
<p>{t("ok")}</p>
</div>
);
};
export default Page
// 이거 페이지마다 해줘야 함
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ["common", "button", ... ])), // 해당 페이지에서 쓸 파일명 나열
},
});그러다보니 next-i18next에 대해서 많이 잊었다가 이 글을 쓰기 위해 리마인드하기 위해 검색하다 보니 url에 /ko/ /en/ 이런것도 붙었었던 것 같기도 하고 아무튼 뭔가 많이 너저분했었던 기억만 남아있을 정도랄까?
2. next-translate
next.config.js에서
const nextTranslate = require('next-translate-plugin')
const nextConfig = {
.
.
.
...nextTranslate(),
}
module.exports = nextConfig이 설정과
/locale/에 언어별로 json 파일을 두고,
i18n.json에서는 pages라는 항목에 경로별로 어떤 파일을 적용할껀지 설정해준다. 여기가 바로 핵심적으로 감동했던 부분이었다.
{
"locales": [
"ko",
"en",
.
.
.
],
"defaultLocale": "ko",
"pages": {
"*": [
"common",
"button",
"navigation",
.
.
.
]
}
}
// "*" 은 경로=1.x 버전일때 저렇게 경로를 안 잡으면 components 폴더 안의 파일들이 안되길래 급한 마음에 저렇게 하고 그 후 테스트를 놨었는데 다른 해결책이 있을 수도 있다.
// []에는 /locales/ 하위 언어별 파일명마지막으로 매 페이지에서는 다음과 같은 방식으로 쓰기만하면 된다.
import useTranslation from 'next-translate/useTranslation'
import getT from 'next-translate/getT'
// Front
function Page () {
const { t } = useTranslation('') // '' 안에 locale의 특정 파일명을 넣을 수도 있지만 비워두면 다 불러옴
return
<>
<button>{t('button:back')}</button>
<button>{t('button:confirm.ok')}</button>
<button>{t('button:confirm.cancel')}</button>
</>
}
// button => 파일명
// back, confirm.ok, confirm.cancel => json key
export default Page
// Server
export async function getServerSideProps(context) {
const { locale } = context
const t = await getT(locale, '') // '' 안에 특정 파일명 가능
console.log(t('button:back');
return {
props: {}
}
}1.xx버전때 설정한 이후로 쭉 쓰고 있는데 초기 설정 당시 useTranslation를 매 페이지에서 하니 부하가 있는 듯해 react의 context에서 한번 한 후 꺼내 쓰는 방식으로 해서 속도를 드라마틱하게 개선했었는데 그 후 관련 테스트를 안해서 요즘은 모르겠지만 아무튼 사용성이 편해서 잘 쓰고 있다.
결론: next-translate 쓰세요!
'Javascript > React.js - Next.js' 카테고리의 다른 글
| next.js 에서 TinyMCE Editor 적용 - community, cloud ver. (0) | 2023.08.21 |
|---|