i18next/next-i18next

어떤 프로젝트인가요?

핵심 기능

• 01App Router, Pages Router, 두 라우터를 함께 사용하는 프로젝트를 하나의 코드베이스에서 지원합니다.
• 02cookie 또는 Accept-Language로 언어를 감지하고 locale 접두사가 붙은 경로로 리디렉션합니다.
• 03public 파일이나 serverless 플랫폼에서 사용할 수 있는 dynamic imports로 번역을 불러옵니다.
• 04서버 컴포넌트에서 클라이언트 컴포넌트로 불러온 리소스를 직렬화해 전달합니다.
• 05선택형 플러그인을 통해 ICU 및 MF2 메시지 형식을 지원합니다.
• 06HTTP, Locize 같은 사용자 지정 i18next 백엔드를 사용할 수 있습니다.

활용 사례

• 기존 Next.js App Router 사이트에 다국어 지원을 추가할 때.
• Pages Router에서 마이그레이션하면서 현지화된 경로와 현지화되지 않은 경로를 함께 운영할 때.
• 번역된 Next.js 앱을 Vercel 또는 다른 serverless 호스팅 플랫폼에 배포할 때.
• CDN 또는 번역 관리 서비스에서 번역을 불러올 때.

빠른 시작

1. 1

   패키지를 설치합니다

   npm install next-i18next i18next react-i18next
2. 2

   번역 JSON 파일과 resourceLoader를 사용하는 i18n 설정을 만듭니다

3. 3

   createProxy(i18nConfig)를 내보내는 proxy.ts를 추가합니다

4. 4

   initServerI18next와 I18nProvider로 루트 레이아웃을 설정합니다

사용 전 알아둘 점

• !서버리스 플랫폼에서는 런타임에 public/ 파일을 사용할 수 없으므로 resourceLoader로 번역을 불러와야 합니다.
• !개발 환경에서 import() 기반 로더로 번역을 핫 리로드하면 멈출 수 있어 우회 방법이 필요합니다.
• !cacheComponents를 활성화하면 파일 기반 번역을 읽을 때 next dev에서 캐시되지 않은 데이터 경고가 표시됩니다.

토픽

자주 묻는 질문

next-i18next은(는) 무엇인가요?

Next.js 앱에서 App Router, Pages Router, middleware에 i18next와 react-i18next를 연결하는 번역 툴킷입니다. next-i18next는 i18next와 react-i18next를 기반으로 Next.js 앱 번역에 필요한 부분을 처리하는 계층입니다. proxy/middleware를 통한 언어 감지와 locale 리디렉션, 서버 컴포넌트와 클라이언트 컴포넌트 간의 분리, 서버에서 클라이언트로 불러온 번역을 전달하는 기능을 제공합니다.

next-i18next은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

next-i18next은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

next-i18next은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. next-i18next의 마지막 커밋은 2026년 11월 3일입니다.

next-i18next은(는) 어디에 사용할 수 있나요?

기존 Next.js App Router 사이트에 다국어 지원을 추가할 때. Pages Router에서 마이그레이션하면서 현지화된 경로와 현지화되지 않은 경로를 함께 운영할 때. 번역된 Next.js 앱을 Vercel 또는 다른 serverless 호스팅 플랫폼에 배포할 때. CDN 또는 번역 관리 서비스에서 번역을 불러올 때.

next-i18next는 어떻게 설치하나요?

패키지를 설치합니다: npm install next-i18next i18next react-i18next 번역 JSON 파일과 resourceLoader를 사용하는 i18n 설정을 만듭니다 createProxy(i18nConfig)를 내보내는 proxy.ts를 추가합니다 initServerI18next와 I18nProvider로 루트 레이아웃을 설정합니다

next-i18next은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/i18next/next-i18next