next-intl is a popular i18n library designed specifically for Next.js.

Installation

bash
npm install next-intl

Setup

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

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

Middleware

typescript
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'fr', 'de'],
  defaultLocale: 'en',
});

Using in Components

typescript
import { useTranslations } from 'next-intl';

export function Header() {
  const t = useTranslations('common');

  return (
    <nav>
      <a href="/">{t('home')}</a>
      <a href="/about">{t('about')}</a>
    </nav>
  );
}

Features

  • Automatic locale detection
  • Type-safe translations
  • Pluralization support
  • Date/number formatting
✓ Completed