# gt-next: General Translation Next.js SDK: Dynamic Content
URL: https://generaltranslation.com/en-US/docs/next/guides/dynamic-content.mdx
---
title: Dynamic Content
description: How to translate runtime content using server-side translation APIs
---

Dynamic content translation handles text that isn't available at build time - user-generated content, API responses, or database records. Use [`<Tx>`](/docs/next/api/components/tx) for JSX content and [`tx`](/docs/next/api/strings/tx) for plain strings, both server-side only for security.

<Callout type="warn">
  **Use sparingly:** Dynamic translation consumes API quota and adds latency. Prefer [`<T>` components](/docs/next/guides/t) with [variable components](/docs/next/guides/variables) whenever possible.
</Callout>

## When to use dynamic translation

Dynamic translation is for content that truly cannot be known at build time:

### Appropriate use cases
- **User-generated content**: Chat messages, reviews, social posts
- **External API responses**: Third-party data, RSS feeds, external services  
- **Database records**: Dynamic CMS content, user profiles from APIs
- **Real-time data**: Live notifications, status messages

### Avoid for these cases
- User names, account numbers → Use [`<Var>`](/docs/next/api/components/var)
- Conditional messages → Use [branch components](/docs/next/guides/branches)
- Form validation → Use [string translation](/docs/next/guides/strings)
- Static configuration → Use [shared strings](/docs/next/guides/shared-strings)

## Quickstart

### JSX content with Tx
```jsx
import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}
```

### Plain strings with tx
```jsx
import { tx } from 'gt-next/server';

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}
```

## Server-side only

Both [`<Tx>`](/docs/next/api/components/tx) and [`tx`](/docs/next/api/strings/tx) are server-side only for security:

```jsx
// ✅ Server component
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client component - won't work
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Error!
  return <div>{translated}</div>;
}
```

## Examples

### User-generated content
```jsx
import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}
```

### External API data
```jsx
import { tx } from 'gt-next/server';

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}
```

### Mixed content
```jsx
import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Static content with variables */}
      <T>
        <p><Var>{review.author}</Var> rated this <Var>{review.rating}</Var> stars</p>
      </T>
      
      {/* Dynamic user content */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```

## API route usage

[`tx`](/docs/next/api/strings/tx) works in Next.js API route handlers, not just server components:

```tsx
// app/api/translate/route.ts
import { tx } from 'gt-next/server';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { text, locale } = await request.json();
  const translated = await tx(text, { locale });
  return NextResponse.json({ translated });
}
```

This is useful when you need to expose translation as an API endpoint — for example, to serve client components or external services.

## Client-side translation pattern

Since [`tx`](/docs/next/api/strings/tx) is server-only, client components can translate dynamic content by calling an API route as a proxy:

```tsx
'use client';

async function translateText(text: string) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, locale: 'fr' }),
  });
  const { translated } = await res.json();
  return translated;
}
```

This pairs with the [API route above](#api-route-usage) to give client components access to dynamic translation.

## Translating multiple items

Use `Promise.all` to translate arrays of content in parallel:

```tsx
import { tx } from 'gt-next/server';

const translatedPosts = await Promise.all(
  posts.map(async (post) => ({
    ...post,
    title: await tx(post.title),
  }))
);
```

This is useful for translating lists of database records, API responses, or any collection of dynamic strings.

## Common issues

### Avoid overuse
Don't use dynamic translation for content that can use standard components:

```jsx
// ❌ Unnecessary
const content = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Use variable components instead
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);
```

### API quota impact
Dynamic translation consumes API quota on every request. Use caching and error handling in production applications.

## Next steps

<Callout>
  **See it in action:** Check out the [dynamic content example app](https://github.com/gt-examples/dynamic-content-tx) for a working demo of `tx()` and `<Tx>` — [live preview](https://dynamic-content-tx.generaltranslation.dev).
</Callout>

- [Local Translation Guide](/docs/next/guides/local-tx) - Handle translations without API calls
- [Middleware Guide](/docs/next/guides/middleware) - Language detection and routing
- API References:
  - [`<Tx>` Component](/docs/next/api/components/tx)