1.0. 도입 배경

• 현재 제가 맡고 있는 프로젝트 중 하나인 LemonSound 플랫폼은 한국 뿐만 아니라 일본, 중국, 영어권 국가까지 고객층이 다양하여 다국어 지원을 하게 되었습니다.
• 보통 국내의 서비스들은 한국어 하나로 서비스를 운영하는 것이 일반적이지만 LemonSound는 다국어 지원이 필수적으로 적용되는 것이 특징이었습니다. 현재는 일본어, 영어, 중국어(간체), 한국어로 운영 중입니다.

1.1. 사용한 라이브러리와 선택 이유

• 다국어 지원 기능을 위하여 저는 next-intl 라이브러리를 선택했습니다.
  • 선정 이유는 단순합니다. 글로벌 서비스 다국어 기능에 i18next 기능이 가장 적합하였고 많은 서비스들에서 많이 쓰기 때문입니다.
• next-intl은 아래와 같은 기능을 제공합니다.
  • 타입스크립트 지원
  • 메시지 포맷팅
  • 날짜, 시간, 숫자의 지역화
  • SEO 최적화
  • 서버 컴포넌트 지원
  • 경량화된 번들 사이즈

1.2. 디렉토리 구조

root
├── messages
│   ├── en.json (1)
│   ├── ko.json
│   ├── ja.json
│   └── ...
├── next.config.js (2)
├── i18n (3)
│   ├── request.ts (4)
└── app

1. messages 폴더: 메시지 파일을 저장하는 디렉토리입니다. en.json, ko.json 등의 파일로 구성됩니다.
2. next.config.js: next-intl 플러그인을 설정하는 파일입니다.
3. i18n 폴더: 국제화 설정을 위한 파일을 저장하는 디렉토리입니다.
4. i18n/request.ts: 브라우저 언어 감지 및 쿠키 설정

2.0. 프로젝트 설정

2.1. next.config.js

2.1. request.ts

2.2. Layout 파일에 적용