TypeScript integration

next-intl integrates with TypeScript out-of-the box without additional setup. You can however provide the shape of your messages to get auto-completion and type safety for your namespaces and message keys.

// messages.json

{
  "About": {
    "title": "Hello"
  }
}

// About.tsx

function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');

  // ✖️ Unknown message key
  t('description');

  // ✅ Valid message key
  return <p>{t('title')}</p>;
}

To do this, add a global type definition file in your project root (e.g. global.d.ts):

// Use type safe message keys with `next-intl`
type Messages = typeof import('./messages/en.json');
declare interface IntlMessages extends Messages {}

You can freely define the interface, but if you have your messages available locally, it can be helpful to automatically create the interface based on a messages sample by importing it.