다국어 지원 완벽 가이드

TUTORIAL

다국어 지원 완벽 가이드

i18n 국제화와 l10n 지역화의 핵심. next-intl로 글로벌 사용자를 위한 다국어 앱을 구축합니다.

럿지 AI 팀

2025-01-15

15분

국제화 핵심 개념

i18n(국제화)과 l10n(지역화)로
글로벌 사용자를 위한 앱을 만드세요.

i18n

Internationalization

다국어 지원 준비

l10n

Localization

특정 언어/문화 적용

next-intl 설정

// i18n.ts
import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`./messages/${locale}.json`)).default
}));

// middleware.ts
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
  locales: ['en', 'ko', 'ja'],
  defaultLocale: 'ko'
});

지원 언어

🇰🇷

한국어

🇺🇸

English

🇯🇵

日本語

🇨🇳

中文

🇪🇸

Español

🇩🇪

Deutsch

번역 사용

import { useTranslations } from 'next-intl';

export default function HomePage() {
  const t = useTranslations('Home');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('welcome', { name: '럿지' })}</p>
    </div>
  );
}

i18n 라이브러리

next-intl

react-i18next

lingui

formatjs

polyglot