I18N

i18n Knowledge Base

Lingue Supportate

next-intl Setup

npm install next-intl

// src/i18n/config.ts
export const locales = ['it', 'en', 'cs'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'it';

Middleware Configuration

// middleware.ts
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['it', 'en', 'cs'],
  defaultLocale: 'it',
  localePrefix: 'always',
});

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

Messages Structure

// messages/it.json
{
  "common": {
    "loading": "Caricamento...",
    "submit": "Invia"
  },
  "home": {
    "title": "Benvenuto",
    "description": "La soluzione per te"
  }
}

Usage in Components

import { useTranslations } from 'next-intl';

function Component() {
  const t = useTranslations('home');
  return <h1>{t('title')}</h1>;
}

Pluralization

{
  "items": "{count, plural, =0 {Nessun elemento} one {# elemento} other {# elementi}}"
}

t('items', { count: 5 }) // "5 elementi"

Language Switcher

'use client';
import { useLocale } from 'next-intl';
import { useRouter, usePathname } from 'next/navigation';

export function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();

  function switchLocale(newLocale: string) {
    router.push(pathname.replace(`/${locale}`, `/${newLocale}`));
  }

  return (
    <select value={locale} => switchLocale(e.target.value)}>
      <option value="it">Italiano</option>
      <option value="en">English</option>
      <option value="cs">Čeština</option>
    </select>
  );
}

SEO Multilingua

// layout.tsx
export async function generateMetadata({ params: { locale } }) {
  return {
    alternates: {
      languages: {
        'it': '/it',
        'en': '/en',
        'cs': '/cs',
        'x-default': '/it',
      },
    },
  };
}

Date/Number Formatting

import { useFormatter } from 'next-intl';

function Formatted() {
  const format = useFormatter();
  
  return (
    <>
      <p>{format.dateTime(new Date(), { dateStyle: 'long' })}</p>
      <p>{format.number(1234.56, { style: 'currency', currency: 'EUR' })}</p>
    </>
  );
}

Checklist

• Tutte le stringhe in file messaggi
• Routing con prefisso locale (/it, /en, /cs)
• Language switcher accessibile
• hreflang tags in head
• Sitemap multilingua
• Pluralization corretta
• Date/number formatting