i18next/next-i18next

Next.js 앱을 위한 가장 쉬운 다국어 지원 라이브러리

개발 재료맘대로 써도 됨 · MIT웹·Next.js·풀스택난이도

6,156+0이번 주7670TypeScript

중간맛 분석

스택: TypeScript + i18next + react-i18next 기반. App Router(서버 컴포넌트/클라이언트 컴포넌트/미들웨어), Pages Router, 혼합 라우터 모두 지원합니다. 바로 쓸 수 있나: 네, 5단계 설정(설치→번역파일→설정→프록시→레이아웃)으로 즉시 사용 가능합니다. 난이도: 중간(2-3). 번역 파일 구조와 미들웨어 개념 이해 필요. 데모/예제: examples/ 폴더에 app-router, pages-router, 혼합 라우터 예제 포함.

이런 레포예요

이럴 때 쓰면 좋아요

글로벌 시장을 대상으로 하는 Next.js SPA/SSR 앱을 빠르게 다국어화하고 싶을 때
Vercel 같은 서버리스 플랫폼에서 번역 파일을 번들에 포함시켜야 할 때
기존 Pages Router 프로젝트를 App Router로 마이그레이션하면서 i18n 설정을 유지하고 싶을 때

핵심 기능

App Router와 Pages Router 양쪽 모두 지원쿠키 및 Accept-Language 기반 자동 언어 감지locale-in-path(/en/about) 및 no-locale-path 라우팅 모드

대안 대비 차별점

단일 라이브러리로 현대적인 App Router(Server Components), 기존 Pages Router, 혼합 라우터 환경을 모두 지원하는 것이 핵심 차별점입니다.

준비물

Next.js 13.0 이상
Node.js 16 이상
기본 i18next 개념 이해

바로 시작하기

라이브러리 및 의존성 설치

npm install next-i18next i18next react-i18next

번역 파일 생성

mkdir -p app/i18n/locales/en app/i18n/locales/de

각 폴더에 common.json 같은 번역 JSON 파일 생성

설정 파일 생성 i18n.config.ts 파일을 프로젝트 루트에 생성:

import type { I18nConfig } from 'next-i18next/proxy'

const i18nConfig: I18nConfig = {
  supportedLngs: ['en', 'de'],
  fallbackLng: 'en',
  defaultNS: 'common',
  ns: ['common'],
  resourceLoader: (language, namespace) =>
    import(`./app/i18n/locales/${language}/${namespace}.json`),
}

export default i18nConfig

프록시 설정 (Next.js 16+) proxy.ts를 프로젝트 루트에 생성:

import { createProxy } from 'next-i18next/proxy'
import i18nConfig from './i18n.config'

export const proxy = createProxy(i18nConfig)

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js|site.webmanifest).*)'],
}

루트 레이아웃 설정 app/[lng]/layout.tsx 파일:

import { initServerI18next, getT, getResources, generateI18nStaticParams } from 'next-i18next/server'
import { I18nProvider } from 'next-i18next/client'
import i18nConfig from '../../i18n.config'

initServerI18next(i18nConfig)

export async function generateStaticParams() {
  return generateI18nStaticParams()
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ lng: string }>
}) {
  const { lng } = await params
  const { i18n } = await getT()
  const resources = getResources(i18n)

  return (
    <html lang={lng}>
      <body>
        <I18nProvider language={lng} resources={resources}>
          {children}
        </I18nProvider>
      </body>
    </html>
  )
}

페이지에서 사용 app/[lng]/page.tsx에서:

import { getT } from 'next-i18next/server'

export default async function Home() {
  const { t } = await getT('common')
  return <h1>{t('title')}</h1>
}

별 추이 · 7일

6,156+0 / 7일

활용성 · 따라 만들기 좋은가

따라 하기 좋음샘플 점수 50/100

관대한 라이선스
테스트 있음
예제 디렉토리
최근 활동
AGENTS.md
llms.txt
템플릿

🟢 최근 활동 있음 · 2018년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기