To use localize your Next.js app you can use the Next.js i18n-routing feature.
- Created Next.js project with installed
- Created project in Tolgee platform with 2 languages. In our case it is English (en) and Czech (cs).
- Added some localization key and translations for both languages. In our case the key name is
- Generated API key for your project
- Exported data as zip of jsons (stored somewhere)
First you have to add i18n settings into your
Create file (if not exists)
.env.development.local and add this content to it
<your api key> with your generated API key.
Save exported json files to
i18n folder in your project structure.
Then wrap your main component with
Import the localization data and provide them to TolgeeProvider using
forceLanguage prop forces Tolgee to use the language which is provided by Next.js. It will not try to change it
using its own way.
Use T component to translate some text somewhere in your app.
You are done! Now you can translate your strings directly in your application, and enjoy the features of Next.js in the same time! You can find the example application code in this repo: github.com/tolgee/next-example.
Now you can use translation methods described here.