getMessages()

Overview

The getMessages() function is an async function for translating encoded strings from msg() at build time.

const m = await getMessages();

<p>{  m(encodedString)  }</p>;

Reference

Parameters

None

Returns

A promise of a callback function, m(), which translates the provided encoded content from msg().

Promise<(encodedContent: string, options?: Record<string, any>) => string>

Behavior

Production

During the CD process, any content inside of a msg() function will be translated before your application is deployed. This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) stored in your app's build output, according to your configuration. From there, the translated content is served to your users. If a translation is not found, it will fallback to the originial content.

Make sure to follow the deployment guide here.

Development

During development, the m() function will translate content on demand. This is useful for prototyping what your app will look like in different languages. Remember to add a Dev API key to your environment to enable this behavior.

You will see a delay during on demand translation in development. This will not occur during for production builds unless content is explicitly being translated on demand, i.e., using tx() or <Tx>.

Example

Basic Usage

You can use getMessages() to translate encoded strings from msg().

import { msg, getMessages } from 'gt-next/server';

const encodedGreeting = msg('Hello, Alice!');

export default async function TranslateGreeting() {
  const m = await getMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Note: "Alice" will be translated to the user's preferred language.

Using variables

You can override variables in encoded strings.

import { msg, getMessages } from 'gt-next/server';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default async function TranslateGreeting() {
  const m = await getMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Note: This will display "Hello, Bob!" - the variable is overridden at render time.

Using ICU message format

gt-next supports ICU message format, which allows you to also format your variables.

import { msg, getMessages } from 'gt-next/server';

const encodedMessage = msg('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 });

export default async function TranslateGreeting() {
  const m = await getMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Notes

• The getMessages() function is a server-side function that translates encoded strings from msg().
• Translations strings with getMessages() happen before runtime, during the build process (unless in development).

Next steps

• See useMessages() for client-side string translations from encoded strings at buildtime.
• See msg() for encoding strings for translation.
• For runtime translations, see tx() and <Tx>.
• See InlineTranslationOptions for more information on customizing translations.