> For the complete documentation index, see [llms.txt](https://docs.magictranslate.io/magic-translate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.magictranslate.io/magic-translate/clients/react-ssr/the-translate-function.md).

# The translate function

Translate content outside JSX with the translate function

Sometimes you need to translate content in your React application that's not part of your JSX templates. One example is the metadata of a Next.js application. 

Luckily this is no problem with Magic Translate and can easily be achieved with the translate function that is set up when preparing Magic Translate for SSR. 

As documented on the [React SSR](/magic-translate/clients/react-ssr.md) page, to get started you needed to set up the translate function and the `<T>` component, like so:

```typescript
import { createT, setupTranslate } from "@magic-translate/react-ssr";

const magicTranslateConfig = {
  apiKey: "<your-api-key>",
}

// the translate function!
export const translate = setupTranslate(magicTranslateConfig);

export const T = createT(translate);
```

The `translate` function set up here is just a plain function that takes a language, a text and optional options as input parameters and returns the translation of the string asynchronously.

```typescript
const translation = await translate(
    Language.ZH,
    'This sentence will be translated to Chinese'
)
```

Going back to the example of Next.js metadata, here's how you could translate your metadata with the `translate` function:

```typescript
import { Metadata, NextPage } from 'next';
import { Language } from '@magic-translate/react-ssr'

export async function generateMetadata(
  { params }: { params: { lang : Language } }): Promise<Metadata> {
  return {
    title: await translate(
      params.lang,
      'This page title will be translated'
    ),
  };
}
```