국제화 라우팅

export const locales = ['ko', 'en', 'ja'] as const;

export type Locale = (typeof locales)[number];

export const defaultLocale: Locale = 'ko';

export function isLocale(value: string): value is Locale {
  return locales.includes(value as Locale);
}

src/app/
├─ [locale]/
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ about/page.tsx
└─ api/
src/
└─ proxy.ts

import { NextResponse, type NextRequest } from 'next/server';
import { defaultLocale, locales } from '@/i18n/config';

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const hasLocale = locales.some(
    (locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`),
  );

  if (hasLocale) {
    return NextResponse.next();
  }

  const url = request.nextUrl.clone();
  url.pathname = `/${defaultLocale}${pathname}`;
  return NextResponse.redirect(url);
}

export const config = {
  matcher: [
    '/((?!api|_next|favicon.ico|robots.txt|sitemap.xml|manifest.webmanifest|.*\\..*).*)',
  ],
};

import { notFound } from 'next/navigation';
import { isLocale, locales, type Locale } from '@/i18n/config';

interface LocaleLayoutProps {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

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

{
  "home": {
    "title": "회원 게시판",
    "welcome": "방문해 주셔서 감사합니다."
  },
  "about": {
    "title": "소개"
  },
  "navigation": {
    "home": "홈",
    "about": "소개"
  }
}

{
  "home": {
    "title": "Member Board",
    "welcome": "Thank you for visiting."
  },
  "about": {
    "title": "About"
  },
  "navigation": {
    "home": "Home",
    "about": "About"
  }
}

{
  "home": {
    "title": "会員掲示板",
    "welcome": "ご訪問いただきありがとうございます。"
  },
  "about": {
    "title": "紹介"
  },
  "navigation": {
    "home": "ホーム",
    "about": "紹介"
  }
}

import 'server-only';
import type { Locale } from './config';

const dictionaries = {
  ko: () => import('@/dictionaries/ko.json').then((module) => module.default),
  en: () => import('@/dictionaries/en.json').then((module) => module.default),
  ja: () => import('@/dictionaries/ja.json').then((module) => module.default),
} satisfies Record<Locale, () => Promise<unknown>>;

export async function getDictionary(locale: Locale) {
  return dictionaries[locale]();
}

import { notFound } from 'next/navigation';
import { getDictionary } from '@/i18n/dictionaries';
import { isLocale } from '@/i18n/config';

interface HomePageProps {
  params: Promise<{ locale: string }>;
}

export default async function HomePage({ params }: HomePageProps) {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

  const dictionary = await getDictionary(locale);

  return (
    <main>
      <h1>{dictionary.home.title}</h1>
      <p>{dictionary.home.welcome}</p>
    </main>
  );
}

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { locales, type Locale } from '@/i18n/config';

function replaceLocale(pathname: string, locale: Locale) {
  const segments = pathname.split('/');
  segments[1] = locale;
  return segments.join('/') || `/${locale}`;
}

export function LocaleSwitcher() {
  const pathname = usePathname();

  return (
    <nav aria-label="언어 선택">
      {locales.map((locale) => (
        <Link key={locale} href={replaceLocale(pathname, locale)} hrefLang={locale}>
          {locale.toUpperCase()}
        </Link>
      ))}
    </nav>
  );
}

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getDictionary } from '@/i18n/dictionaries';
import { isLocale } from '@/i18n/config';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

  const dictionary = await getDictionary(locale);

  return {
    title: dictionary.about.title,
    alternates: {
      canonical: `https://board.example/${locale}/about`,
      languages: {
        ko: 'https://board.example/ko/about',
        en: 'https://board.example/en/about',
        ja: 'https://board.example/ja/about',
      },
    },
  };
}

const price = new Intl.NumberFormat('ko-KR', {
  style: 'currency',
  currency: 'KRW',
}).format(25000);

const publishedAt = new Intl.DateTimeFormat('ko-KR', {
  dateStyle: 'long',
  timeZone: 'Asia/Seoul',
}).format(new Date('2026-07-18T03:00:00Z'));