codegen

The codegen command transforms your source files by replacing hardcoded strings with t() calls (keys mode) or <T> components (inline mode), and injecting the necessary imports and hooks.

Usage

translate-kit codegen

Flags

Prerequisites

Run scan first to generate the .translate-map.json file that codegen uses to map strings to keys.

Transformations

JSX Text Replacement

// Before
<h1>Welcome</h1>

// After
<h1>{t("common.welcome")}</h1>

Attribute Replacement

// Before
<input placeholder="Enter name" />

// After
<input placeholder={t("form.enterName")} />

Object Property Replacement

// Before
const item = { title: "Dashboard" };

// After
const item = { title: t("nav.dashboard") };

Import Injection

If missing, codegen adds the i18n import:

import { useTranslations } from "next-intl";

The import source is configured via scan.i18nImport (default: "next-intl").

Hook Injection

Codegen adds the useTranslations hook to components that use t():

function MyComponent() {
  const t = useTranslations();
  // ...
}

The hook is only injected in components that actually have t() calls.

Inline Mode

When mode is "inline", codegen uses <T> components instead of t() for JSX text:

JSX Text Wrapping

// Before
<h1>Welcome</h1>

// After
<h1><T id="hero.welcome">Welcome</T></h1>

Attribute Replacement

// Before
<input placeholder="Enter name" />

// After
<input placeholder={t("Enter name", "form.enterName")} />

The t() function in inline mode takes two arguments: the source text and the key.

Import Injection

Codegen detects whether a file is a client or server component:

• Client files ("use client"): imports T and useT from the configured componentPath
• Server files: imports T and createT from componentPath-server

Hook Injection

• Client: const t = useT()
• Server: const t = createT()

See the Inline Mode guide for full details.