Skip to main content

To use Tolgee with your Next application, use React integration library together with Next i18n support.

Tolgee for React provides simple API to create multi-lingual React application. With Tolgee i18n library for React you can enjoy all Tolgee i18n features.

To see Next with Next in action, check this example app.

npm i @tolgee/react

Get started!

1. Create project in Tolgee platform

Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.

2. Setup Tolgee integration

Install the npm packages.

npm i @tolgee/react

Prepare your next-config.js.

/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
i18n: {
locales: ['en', 'cs'],
localeDetection: true,
defaultLocale: "en"
},
}

Then wrap your code with TolgeeProvider

import { TolgeeProvider } from "@tolgee/react";
import enLocale from "../i18n/en.json";
import csLocale from "../i18n/cs.json";

export const Wrapper = () => {
const {locale: activeLocale} = useRouter();

return (
<TolgeeProvider
filesUrlPrefix="i18n/"
apiUrl="https://app.tolgee.io"
apiKey="<your api key>"
forceLanguage={activeLocale}
staticData={{
en: enLocale,
cs: csLocale
}}
>
<App />
</TolgeeProvider>
);
}

3. Use T component to translate your texts

import { T } from "@tolgee/react";

export const Component = () => {
return (
<h1>
<T keyName="translate_me">Translate me!</T>
</h1>
)
}

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...

More integrations

Show all