홈페이지 언어 변환 작업을 하기 전 다국어 지원을 위한 라이브러리를 사용하려고 하는데 어떤 i18n 라이브러리를 쓸지 고민을 했었음
- next-i18next
- i18next
- next-intl
npm trends에서 지난 1년간 다운로드를 했던 수를 보았다.
다음은 라이브러리에 관한 정의를 해놓았다.
1. i18next: 범용적으로 강력한 국제화 엔진
2. next-i18next: i18next를 Next.js에 통합한 래퍼 라이브러리 (pages router 중심)
3. next-intl: App Router 기반 Next.js 프로젝트를 위한 경량화된 i18n 솔루션
추세는
i18next를 많이 쓰지만 그럼에도 불구하고
이 세가지 중에 나는 마지막next-intl라이브러리를 쓰려고 결정했다. 이유는 다음과 같다.
✅ App Router 완전 지원
- Next.js 13부터 도입된 App Router는 server components, layout.tsx, metadata, loading.tsx 등 새로운 패러다임을 중심으로 동작한다.
- i18next나 next-i18next는 기본적으로 pages router에 최적화된 구조다.
- 특히 next-i18next는 getStaticProps, getServerSideProps 기반이라 server component와 동작하지 않는다.
- 반면 next-intl은 App Router에 최적화된 설계이며, layout.tsx, server components, metadata에서의 다국어 처리를 기본으로 지원한다.
- 예를 들어, app/[locale]/layout.tsx에서 NextIntlClientProvider를 감싸기만 하면 모든 하위 컴포넌트에서 번역이 작동한다.
✅ 설정 간편성 및 학습 곡선
- next-intl: 설정이 매우 간단하다. locale 파일을 JSON으로 만들고,
<NextIntlClientProvider>로 감싸기만 하면 끝.- i18next, next-i18next: 다양한 옵션이 많아 유연성은 크지만, 설정이 복잡하고 boilerplate도 많다.
- 빠르게 MVP 또는 프로덕션을 만들려는 입장에서는 next-intl의 간결함이 결정적인 장점이다.
✅ 실제 번들 사이즈
next-intl | 12~15KB | 매우 가볍고 퍼포먼스 최적
i18next | 45~55KB | 무겁고 부가 설정 많음
next-i18next | 약 50~60KB | 가장 무거움 (의존성 + 설정용 코드 포함)
요약을 하자면
- 가장 가볍고 직관적이며, 서버 컴포넌트와 완벽히 연동된다.
- 러닝 커브 측면에서도 다른 라이브러리보다 훨씬 쉽기 때문에 이것을 선택하였다. (강력한 이유)
- 따라서 빠르게 빠르게 개발하는 것이 좋은 상황인 나에게 매우 적합한 라이브러리라고 생각되었다.
또한 라이브러리를 도입하기 이전 서치를 통해 알아내었던 next-intl 설정 방법이다.
(기존 방법 삭제 및 수정)
역시 정답은 공식문서에 있다.!!!!!!!!!!!!!
공식문서 링크 (next-intl in app-router 동적라우팅)
https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing
- 위 문서를 따라서 하다보니 정상 작동을 하게 되었다.
대략적인 방법은 아래와 같다.
1. json 파일 생성
2. config 파일 수정
3. 루트 디렉토리에서 i18n폴더를 만든 후 라우팅, 탐색 파일을 만든다.
4. 위 파일을 가지고 미들웨어 설정
5. 중앙모듈 구성
6. 레이아웃 파일에 provider 설정
끝!
또한 이것은 서버 컴포넌트, 클라이언트 컴포넌트 둘 다 다른 훅을 이용하여 사용할 수 있다.!!!
아래의 링크를 참고하면 사용할 수 있을 것이다.
https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing#page
