Translating Dynamic Content

Overview

This guide will walk you through how to use the <Tx> component and the tx() function to translate dynamic content in Next.js server components.

By the end of this guide, you will learn the proper syntax for using these components and functions.

We will cover the following:

What is dynamic content?

Dynamic content is content that is not known at build time.

These could include things like variables, user names, input fields, etc.

For example, the following is dynamic content:

const username = 'John Doe';
<p>Your username is {username}</p>

When should you translate dynamic content?

In most cases, you can use Variable Components or Branching Components to handle dynamic content.

These components are designed to handle dynamic content with the <T> component, and thus we recommend using them whenever possible.

However, there are some cases where you need to translate dynamic content on-demand.

For example, if you have a chat message that is created by a user, and want to display it in a different language, you can use gt-next to translate it on-demand.

How to use the <Tx> component

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

Simply wrap whatever JSX content you want to translate with the <Tx> component.

The <Tx> component will then translate the content on-demand, and render the translated content asynchronously.

See the API reference for more information.

How to use the tx() function

The tx() function is a server-side function that can be used to translate strings dynamically.

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

const message = 'Hello, world!';
const translatedMessage = await tx(message);

The tx() function returns a promise that resolves to the translated string.

See the API reference for more information.

Examples

Rendering dynamic content

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

Translating a string

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

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

Production considerations

The behavior of the <Tx> component and the tx() function is the same in development as it is in production.

Regardless of the type of API key you use, the behavior is the same. In both cases, translations are completed live, on-demand.

Common pitfalls

Unnecessary use of <Tx> and tx()

If you are using the <Tx> component or the tx() function, you should only do so if you are truly unable to use Variable Components or Branching Components with the <T> component.

Using <Tx> and tx() when you don't need to is a waste of resources, and will quickly use up your API quota.

Additionally, your content will be rendered slower, as the translations are completed on-demand.