TypeScript augmentation

Source URL: https://next-intl.dev/docs/workflows/typescript

DocsWorkflows & integrationsTypeScript augmentation

TypeScript augmentation

Prefer to watch a video?

Editor tools

next-intl integrates seamlessly with TypeScript right out of the box, requiring no additional setup.

However, you can optionally provide supplemental definitions to augment the types that next-intl works with, enabling improved autocompletion and type safety across your app.

global.ts

    import {routing} from '@/i18n/routing';
    import {formats} from '@/i18n/request';
    import messages from './messages/en.json';

    declare module 'next-intl' {
      interface AppConfig {
        Locale: (typeof routing.locales)[number];
        Messages: typeof messages;
        Formats: typeof formats;
      }
    }

Type augmentation is available for:

• Locale
• Messages
• Formats

Locale

Augmenting the Locale type will affect all APIs from next-intl that either return or receive a locale:

    import {useLocale} from 'next-intl';

    // ✅ 'en' | 'de'
    const locale = useLocale();

    import {Link} from '@/i18n/routing';

    // ✅ Passes the validation