# gt-next: General Translation Next.js SDK: The T Component
URL: https://generaltranslation.com/en-US/docs/next/guides/t.mdx
---
title: The T Component
description: How to internationalize JSX components using the T component
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


The [`<T>` component](/docs/next/api/components/t) is the primary tool for internationalizing JSX content in your Next.js application. It wraps your JSX elements and automatically translates them based on the user's locale.

## Quickstart

Transform any static JSX content by wrapping it with [`<T>`](/docs/next/api/components/t):

```jsx
import { T } from 'gt-next';

// Before
function Greeting() {
  return <p>Hello, world!</p>;
}

// After
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

For dynamic content within [`<T>`](/docs/next/api/components/t), use [Variable Components](/docs/next/guides/variables) and [Branching Components](/docs/next/guides/branches).

## Basic usage

The [`<T>` component](/docs/next/api/components/t) accepts any JSX content as children:

```jsx
// Simple text
<T>Welcome to our app</T>

// HTML elements
<T><h1>Page Title</h1></T>

// Complex nested JSX
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```

## Configuration options

### Adding context

Provide translation context for ambiguous terms:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```

## When to use T

Use [`<T>`](/docs/next/api/components/t) for **static content only**:

```jsx
// ✅ Static content works
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ Dynamic content breaks
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Use Variable components for dynamic content
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Variable and Branching components are designed to work inside [`<T>`](/docs/next/api/components/t) for dynamic content.
  See [Variable Components](/docs/next/guides/variables) and [Branching Components](/docs/next/guides/branches) guides for details.
</Callout>

## Examples

### Simple elements
```jsx
// Basic text
<T>Hello, world!</T>

// Button with text
<T><Button>Submit Form</Button></T>

// Heading with styling
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```

### Complex components
```jsx
// Navigation menu
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Alert message
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```

### With variables

You can use variable components for localized formatting.

```jsx
// Combining static text with dynamic values
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Learn more about the [`<Var>` component](/docs/next/api/components/var) in the [Variable Components Guide](/docs/next/guides/variables).
</Callout>

## Production setup

### Build process
Add translation to your build pipeline:

```json title="package.json"
{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

### Development vs production behavior
- **Development**: With a dev API key, translations happen on-demand when components render. You'll see real-time translation as you develop.
- **Production**: All translations are pre-built during the build stage and will be visible once your application is live.

Set your development API key in your environment to enable live translation during development. You can create one in the Dashboard under [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Privacy considerations
Content in [`<T>`](/docs/next/api/components/t) components is sent to the GT API for translation. For sensitive data, use [Variable Components](/docs/next/guides/variables#privacy) to keep private information local:

```jsx
// Safe - sensitive data stays local
<T>
  Welcome back, <Var>{username}</Var>
</T>
```

## Common issues

### Component boundaries
[`<T>`](/docs/next/api/components/t) only translates direct children, not content inside other components:

```jsx
// ❌ Wrong - content inside components won't be translated
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* Content inside won't be translated */}
</T>

// ✅ Correct - wrap each component individually
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</h1></T>
<MyComponent />
```

### Nesting T components

```jsx
// ❌ Don't nest <T> components
<T>
  <T>Hello world</T> {/* Don't do this */}
</T>
```

### Dynamic content errors
The CLI will error on dynamic content in [`<T>`](/docs/next/api/components/t). Wrap dynamic values with Variable components:

```jsx
// ❌ Wrong - dynamic content breaks
<T><p>Hello {username}</p></T>

// ✅ Correct - use Variable components
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  See the [Variable Components Guide](/docs/next/guides/variables) for handling dynamic values and the [Branching Components Guide](/docs/next/guides/branches) for conditional content.
</Callout>

## Next steps

- [Variable Components Guide](/docs/next/guides/variables) - Handle dynamic content within JSX translations
- [Branching Components Guide](/docs/next/guides/branches) - Add conditional logic to your translations