React SSR

Magic Translate fully embraces React Server Components (RSC)

Getting Started

Install the react SSR client for Magic Translate in your application.

# using yarn
yarn add @magic-translate/react-ssr

# using npm
npm i @magic-translate/react-ssr

# using pnpm
pnpm install @magic-translate/react-ssr

Now it's time to configure your Magic Translate SSR client and the <T> component

// somewhere in your code, eg. ./lib/translate.ts

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

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

export const translate = setupTranslate(magicTranslateConfig);

export const T = createT(translate);

If you don't have an API key yet, please visit magictranslate.io to get one.

Now you can use the translate component <T> in any React server component.

import { Language } from "@magic-translate/react-ssr";
import {
  T
} from './lib/translate' // ... or where ever you located the file above 

const SomeServerComponent = async () => (
  <T lang={Language.ZH}>Please translate me!</T>
)

And that's basically it! You can now translate your application effortlessly into over 70 languages 🤯

Please note that the <T> component from React SSR only works within React server components. If you want to use Magic Translate in client components, please refer to the React client docs.

Changing Languages

To change the current language all you have to do is change the lang prop of the <T> component.

For more options of the <T> component please refer to the <T> component docs. The API of the <T> server component is identical to the API of the client <T> component.

Example project

You can find an example SSR project here: https://github.com/magic-translate/magic-translate-example-react-ssr