Next.js with App Router
tip
You can also check the Next app router example application to learn more.
Follow the below instructions to learn to implement localization to your Next.js App Router app with Tolgee.
In this example we'll store language in cookies, which is a simple to implement, but is not ideal for SEO. If you want a more robust solution with language in url, see App router with next-intl
Prerequisites
- An existing Next.js project.
- An existing project on Tolgee platform with at least 2 languages. This guide uses English (en) and Czech (cs).
- Add localization keys and translations for both the languages. This guide uses the key name
hello_world
. - API key of your Tolgee project.
Install the required packages
To implement localization to your app, you need to install the @tolgee/react
package:
npm install @tolgee/react
Folder structure
The folder structure of your project should resemble the following:
├── .env.development.local # ignored by git
├── next.config.js
├── messages
│ ├── en.json
│ └── cs.json
└── src
├── tolgee
│ ├── shared.ts
│ ├── language.ts
│ ├── client.tsx
│ └── server.tsx
└── app
├── layout.tsx
└── page.tsx
Set up your environment
Create the .env.development.local
file if it does not exist. You will store the Tolgee credentials securely in this file.
Paste the following in the newly created file. Replace <your api key>
with your Tolgee API key.
.env.development.local
NEXT_PUBLIC_TOLGEE_API_KEY=<your api key>
NEXT_PUBLIC_TOLGEE_API_URL=https://app.tolgee.io