Overview

The getMessages function is an asynchronous function that translates encoded strings from msg at build time.

const m = await getMessages();

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

Reference

Parameters

None

Returns

A promise resolving to a callback function, m, which translates the supplied encoded content from msg.

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

Behaviour

Production

During the CD process, any content inside 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 on the CDN or (2) included in your app’s build output, according to your configuration. From there, the translated content is served to your users. If a translation isn’t found, it will fall back to the original content.

Make sure to follow the deployment guide here.

Development

During development, the m function translates content on demand. This is useful for prototyping how your app will look in different languages. Remember to add a Dev API key to your environment to enable this behaviour.

You’ll see a delay when translating on demand in development. This won’t occur in 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 into 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 the ICU message format, which lets you format your variables as well.

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

const encodedMessage = msg('There {count, plural, =0 {are no items} =1 {is one item} other {are {count} items}} in the basket', { 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 with getMessages occur before runtime, during the build process (unless in development).

Next steps

• See useMessages for client-side string translations from encoded strings at build time.
• See msg for encoding strings for translation.
• For runtime translations, see tx and <Tx>.