Translating Strings

Overview

This guide is a step by step tutorial on how to translate strings in your Next.js app using useGT(), getGT(), and tx().

Prerequisites

We assume that you already have installed gt-next in your project and have followed or are currently following the Quick Start Guide.

Translating Strings

Client Side Components

For any client side strings, use useGT(). Remember that useGT() must be called within a child component of <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}

Server Side Components

For any server side strings, use getGT().

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

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}

Adding Variables

Variables are values that may change, but do not get translated. To add variables to your strings, use the following pattern:

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

This works with both useGT() and getGT().

Dynamic Content

Say that you have a string that changes. You can use the tx() function to translate the string at runtime.

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

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Notes

• For translating strings, use useGT(), getGT(), and tx().
• useGT() and getGT() translate before deployment, whereas tx() translates at runtime. Use tx() sparingly.
• Variables can be added to strings using the { variables: { key: value } } pattern.

Next Steps

• Return to the Quick Start Guide to finish setting up your project for translation.
• See the API reference for useGT(), getGT(), and tx().