9단계: 다국어(i18n) 대응 전략

다국어(i18n) 대응 전략

Pliny는 기본적으로 다국어를 내장하고 있지 않지만, Next.js의 i18n 기능과 Contentlayer를 함께 활용하면 다국어 블로그를 구성할 수 있습니다.

9-1. i18n이란?

Internationalization의 줄임말로, 다양한 언어를 지원하는 다국어 사이트를 만들기 위한 설계 방식입니다.

• UI 텍스트 다국어화
• 콘텐츠(MDX 글) 다국어 버전
• 언어 선택 및 경로 분리

9-2. Next.js i18n 기본 설정

// next.config.js
module.exports = {
  i18n: {
    locales: ['ko', 'en'],
    defaultLocale: 'ko',
  },
}

• /ko/blog/post-title, /en/blog/post-title 라우팅 자동 처리
• useRouter().locale로 현재 언어 확인 가능

9-3. Contentlayer 다국어 구성 예시

content/
└── blog/
    ├── ko/
    │   └── hello.mdx
    └── en/
        └── hello.mdx

defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: `**/*.mdx`,
  fields: {
    lang: { type: 'string', required: true },
    ...
  },
  computedFields: {
    slug: (doc) => `${doc.lang}/${doc._raw.flattenedPath}`
  }
}))

• lang 필드를 기준으로 언어별로 슬러그 및 UI 분리 가능

9-4. 다국어 UI 처리

// data/i18n.ts
export const i18n = {
  en: { home: 'Home', about: 'About', contact: 'Contact' },
  ko: { home: '홈', about: '소개', contact: '연락처' }
}

// 사용 예
const t = i18n[locale]

• 또는 next-translate, react-intl, i18next 등 외부 라이브러리 도입

9-5. 언어 전환 UI

<Link href="/" locale="en">English</Link>
<Link href="/" locale="ko">한국어</Link>

• Next.js에서 locale 값에 따라 자동 전환 처리

요약

• Next.js의 i18n 설정으로 URL 경로 기반 다국어 지원
• Contentlayer에서 lang 필드와 폴더 구조로 다국어 콘텐츠 구성
• UI 텍스트는 매핑 객체 또는 라이브러리로 처리 가능
• URL 구조: /ko/, /en/ 형식

심화학습

Q1. UI 텍스트와 콘텐츠를 동시에 다국어로 처리할 때, 어떤 구조로 관리하는 게 유지보수에 가장 효율적일까?

A: content/blog/lang/*.mdx 구조와 data/i18n.ts 텍스트 분리를 함께 사용하고, 레이아웃 내에서 locale별 분기를 둔 컴포넌트 사용이 가장 유지보수에 적합합니다.

Q2. Contentlayer에서 언어별 slug 충돌을 방지하려면 어떤 방식으로 슬러그를 설계해야 할까?

A: 슬러그 생성 시 /${lang}/${doc._raw.flattenedPath}와 같이 언어를 prefix로 추가하면 충돌 없이 관리할 수 있습니다.

Q3. 다국어 SEO 최적화를 위해 필요한 설정(예: hreflang, og:locale 등)은 어떻게 반영해야 할까?

A: PageSEO, BlogSEO에서 <link rel="alternate" hreflang="..."> 태그를 추가하고, og:locale 값을 페이지 언어 기준으로 설정해야 검색엔진에 언어 정보를 명확히 전달할 수 있습니다.