Internationalization

~20 min · i18n, next-intl, locale

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Routing 전략 둘

전략	URL pattern
Sub-path	`/[locale]/page` → `/en/about`, `/ko/about`
Domain-per-locale	`en.example.com`, `ko.example.com`

Sub-path 가 더 단순하고 SEO 친화 default. Domain-per-locale 은 separate marketing team 또는 geo-isolated infra 위해.

`next-intl` 이 well-paved path

Message catalog, locale negotiation, formatting (date/number) 처리, Server 와 Client Component 둘 다에서 작동.

Code

[locale] 아래 locale layout·tsx

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Component 안 translation·tsx

import { useTranslations } from 'next-intl';

export default function HomePage() {
  const t = useTranslations('Home');
  return (
    <>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </>
  );
}

External links

next-intl docs

Exercise

next-intl 사용해서 작은 page 에 en 과 ko locale 추가. URL switch 와 third-party translation key 가 두 locale 다에서 정확히 resolve 하는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousEnvironment Variable Next →Error Handling Pattern

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.