t() function in gt-next

t() translates an item from a gt-next or gt-react dictionary into the user's preferred language. For example, if the user's browser is requesting Spanish (es):

"greeting": <p>Hello, world!</p>

t("greeting") // returns <p>¡Hola, mundo!</p>

getGT()

getGT() can be imported anywhere in your app. When you use getLocale() in client components (components marked 'use client' or their children), they must be the descendants of a <GTProvider>.

import { getGT } from 'gt-next'
 
export default function MyComponent() {
    const t = getGT();
    return (
        <div>
            {t('greeting')}
        </div>
    )
}

getGT() takes an optional id string. This is used as a prefix for items in the dictionary. For example, if you write:

const t = getGT('dashboard')
return t('welcome')

This would be equivalent to:

const t = getGT()
return t('dashboard.welcome')

useGT()

If you want to ensure a translation is only accessed on the client, you can import the useGT() hook from gt-next/client.

import { useGT } from 'gt-next/client'

useGT() is a client-side React hook. It will throw an error if it is used in a server component or outside of a <GTProvider>. Otherwise, it is equivalent to getGT().

Parameters

t(id: string, variables?: Record<string, any>, f?: Function): Promise<string | JSX.Element> | JSX.Element | string

• id: string
  The identifier for the localized string or JSX element. This ID is used to lookup the appropriate translation for the current language.

• variables: Record<string, any>
  An object containing key-value pairs used to dynamically replace placeholders in the localized string or JSX element. The placeholders in the string should match the keys in this object.

• f: Function
  An advanced feature which you probably only need if you're using functional dictionary entries in a client component and using gt-next.

Return Types

t() returns a string, a JSX element, or a promise of either of those two types, depending on what you wrote in the dictionary.

For example, if you use t() on the server to access a string, it will return a Promise<string>:

"message": "Hello, world!"

// server component
const translation = await t('message')
console.log(translation) // ¡Hola, mundo!