~20 min · i18n, next-intl, locale
| Strategy | URL pattern |
|---|---|
| Sub-path | /[locale]/page → /en/about, /ko/about |
| Domain-per-locale | en.example.com, ko.example.com |
Sub-path is simpler and SEO-friendly out of the box. Domain-per-locale is for separate marketing teams or geo-isolated infrastructure.
next-intl is the well-paved pathIt handles message catalogs, locale negotiation, formatting (dates/numbers), and works in both Server and Client Components.
// 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>
);
}import { useTranslations } from 'next-intl';
export default function HomePage() {
const t = useTranslations('Home');
return (
<>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</>
);
}en and ko locales to a small page using next-intl. Confirm the URL switches and a third-party translation key resolves correctly in both locales.No comments yet — be the first.