getGT()

Overview

getGT() is used to get translations from the translation dictionary for server-side components.

const t = await getGT(); // Get the translation function
t('greeting.hello'); // pass the id to get a translation

getGT() supports:

• Translation of string and jsx content.
• Variable insertion and conditional logic within translations.
• Optional id prefixing.

For client-side translations, see useGT().

Reference

Props

Description

Returns

A promise that resolves to the t() translation function with the following signature:

(id: string, options?: Record<string, any>) => React.ReactNode

• id: The identifier of the translation to fetch.
• options: An optional object to provide dynamic variables or branching content.
• Returns: The translated value as a React.ReactNode.

Examples

Basic Usage

Every entry in your dictionary gets translated. Entries can be either JSX or a string.

const dictionary = {
  greeting1: <>Hello, Alice!</>, 
  greeting2: "Hello, Bob!", 
};
export default dictionary;

When we want to access these entries (on the server side), we call getGT(). This returns a function that accepts the key of a translation from the dictionary.

import { getGT } from 'gt-next/server';
 
export default async function translateGreeting() {
  
  const t = await getGT(); 
 
  return (
    <p>
      {t('greeting1')}
      {t('greeting2')}
    </p>
  );
}

Using variables

You can pass variables to dictionary translations. For jsx content, just use a variable component. For string content, add curley braces {} to the string.

In order to pass values, you must (1) assign an identifier and (2) reference the identifier when calling the t() function. In this example, we use <Var> and {} to pass variables to the translations. In the dictionary, we assign identifiers name="userName" and {userName}.

const dictionary = {
  greeting1: <>Hello, <Var name="userName"/> !</>, 
  greeting2: "Hello, {userName}!", 
};
export default dictionary;

In the component, we pass the values userName: "Alice" and userName: "Bob".

import { getGT } from 'gt-next/server';
 
export default async function translateGreeting() {
  const t = await getGT();
  
  // Hello Alice!
  const greetingAlice = t('greeting1', { userName: "Alice" }); 
  // Hello Bob!
  const greetingBob = t('greeting2', { userName: "Bob" }); 
 
  return (
    <p>
      {greetingAlice}
      {greetingBob}
    </p>
  );
}

Using branches

Branching components, such as <Branch> and <Plural>, can be used to handle control logic in a translation.

In order to pass values, you must (1) assign an identifier and (2) reference the identifier when calling the t() function. In this example, we see that hairColor is passed to both <Branch> and <Var> components.

import { Branch, Var } from 'gt-next';
 
const dictionary = {
  hairColor: <>
    <Branch name="hairColor"
      black={<>Their hair is dark.</>}
      brown={<>Their hair is in the middle.</>}
      blonde={<>Their hair is light.</>}
      >
        {/* fallback incase no branch is matched */}
        <p>Unhandled hair color: <Var name="hairColor"/></p>
      </Branch>
  </>,
};

import { getGT } from 'gt-next/server';
 
export default function HairColor() {
  const t = await getGT();
  return (
    <div>
      { t('hairColor', { hairColor: 'brown' }) }
    </div>
  );
}

Using prefixes

We can use prefixes to only translate a subset of the dictionary.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting1: <>Hello, Alice</>,
      greeting2: "Hello, Bob",
    }
  }
};
export default dictionary;

Because we added the value 'prefix1.prefix2' to the getGT method, all of the keys are prefixed with prefix1.prefix2:

import { getGT } from 'gt-next';
 
export default function UserDetails() {
  const t = await getGT('prefix1.prefix2'); 
  return (
    <div>
      <p>{t('greeting1')}</p> {/* greeting1 => prefix1.prefix2.greeting1 */}
      <p>{t('greeting2')}</p> {/* greeting2 => prefix1.prefix2.greeting2 */}
    </div>
  );
}

Notes

• The getGT() function allows you to access dictionary translations on the server side.
• Supports dynamic behavior and variable insertion with Branching and Variable Components respectively.

Next Steps

• See useGT() for the client-side equivalent of getGT().
• See useElement() for rendering jsx content (client/server agnostic).
• Learn more about using dictionaries in the dictionaries reference.
• Enhance server-side locale routing with i18n Routing and locale management with i18n Configuration.