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 autocompletion and type safety for your namespaces and message keys.

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

function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');
 
  // ✖️ Unknown message key
  t('description');
 
  // ✅ Valid message key
  return <p>{t('title')}</p>;
}

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

import en from './messages/en.json';
 
type Messages = typeof en;
 
declare global {
  // Use type safe message keys with `next-intl`
  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 the messages from your default locale by importing it.

If you're encountering problems, please double check that:

1. Your interface is called IntlMessages.
2. You're using TypeScript version 4 or later.
3. The path of your import is correct.
4. Your type declaration file is included in tsconfig.json.
5. Your editor has loaded the most recent type declarations. When in doubt, you can restart.