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 Tolgee 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.
module.exports = {
reactStrictMode: true,
i18n: {
locales: ['en', 'cs'],
localeDetection: true,
defaultLocale: "en"
},
}
Then wrap your code with TolgeeProvider
import enLocale from '../i18n/en.json';
import csLocale from '../i18n/cs.json';
import { useRouter } from 'next/router';
import { TolgeeProvider, DevTools, Tolgee, FormatSimple, useTolgeeSSR } from '@tolgee/react';
const tolgee = Tolgee()
.use(DevTools())
.use(FormatSimple())
.init({
defaultLanguage: 'en',
apiKey: process.env.NEXT_PUBLIC_TOLGEE_API_KEY,
apiUrl: process.env.NEXT_PUBLIC_TOLGEE_API_URL,
staticData: {
en: enLocale,
cs: csLocale,
},
});
function MyApp({ Component, pageProps }: AppProps) {
const { locale } = useRouter();
const ssrTolgee = useTolgeeSSR(tolgee, router.locale);
return (
<TolgeeProvider tolgee={ssrTolgee}>
<Component {...pageProps} />
</TolgeeProvider>
);
}
export default MyApp;
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!
