Overview

getTranslations is used to retrieve string translations from the translation dictionary for server-side components.

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

getTranslations supports:

• Translation of string and JSX content.
  • Variable insertion and conditional logic within translations.
  • Optional ID prefixing.

For client-side translations, see useTranslations.

Reference

Props

Description

Returns

A promise resolving to a translation function d that, given an ID, returns the translated version of the corresponding entry

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>

Examples

Basic dictionary usage

Every entry in your dictionary is translated.

const dictionary = {
  greeting: <>Hello, Alice!</>, 
};
export default dictionary;

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

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

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

Using variables

To pass values, you must (1) assign an identifier and (2) reference that identifier when calling the d function.

In this example, we use {} to pass variables to the translations. In the dictionary, we assign the identifier {userName}.

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

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

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Using prefixes

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

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

Because we’ve added the value 'prefix1.prefix2' to the getTranslations method, all the keys are prefixed with prefix1.prefix2:

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

export default function UserDetails() {
  const d = await getTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notes

• The getTranslations function lets you access dictionary translations on the server side.

Next steps

• See useTranslations for the client-side equivalent of getTranslations.