next-intl Integration

translate-kit is designed to work seamlessly with next-intl. The generated message files are directly compatible with useTranslations.

Setup

The init command scaffolds next-intl integration automatically:

npx translate-kit init

In keys mode, the wizard:

• Installs next-intl automatically
• Creates i18n/request.ts with locale detection
• Updates next.config.ts with createNextIntlPlugin

Message Format

translate-kit generates nested JSON files that next-intl expects:

{
  "common": {
    "save": "Guardar",
    "cancel": "Cancelar"
  },
  "auth": {
    "login": "Iniciar sesion",
    "signup": "Registrarse"
  }
}

Type Safety

Enable typeSafe: true in your config to auto-generate a next-intl.d.ts file on every scan. This gives you autocomplete and compile-time validation for all message keys.

export default defineConfig({
  // ...
  typeSafe: true,
});

You can also generate types manually at any time with translate-kit typegen.

Using with the Scanner

When scan.i18nImport is set to "next-intl" (the default), the codegen step:

1. Adds import { useTranslations } from "next-intl" to components
2. Injects const t = useTranslations() in component bodies
3. Replaces hardcoded strings with {t("key")} calls

Before

function Hero() {
  return (
    <div>
      <h1>Welcome to our platform</h1>
      <p>Get started today</p>
    </div>
  );
}

After

import { useTranslations } from "next-intl";

function Hero() {
  const t = useTranslations();
  return (
    <div>
      <h1>{t("hero.welcome")}</h1>
      <p>{t("hero.getStarted")}</p>
    </div>
  );
}

Workflow

A typical next-intl + translate-kit workflow:

1. Write components with hardcoded English strings
2. Run translate-kit run to scan, transform, and translate in one step
3. On subsequent changes, run translate-kit run to update only what changed

You can also run each step individually:

1. translate-kit scan — extract strings and generate keys
2. translate-kit codegen — replace strings with t() calls
3. translate-kit translate — generate translations

If you only edit source message JSON files manually (without changing source code), translate-kit translate is all you need.