i18n With Tolgee

#webdev #javascript #tolgee #react

🌍 Easy i18n in React with Tolgee

If you're building a React app and want to support multiple languages, using a localization library like Tolgee can make your life much easier. In this post, I’ll walk you through how to add Tolgee to a React project using the App Router (Next.js 13+), support multiple languages, and even set up a language switcher.

🔧 What is Tolgee?

Tolgee is a modern i18n (internationalization) tool for web apps. It supports in-context translation, works well with TypeScript, and integrates nicely with React. It’s like i18next, but a bit easier to set up and manage—especially with its cloud UI.

🛠️ Getting Started

Let’s start by installing the required packages.

npm install @tolgee/react tolgee

⚙️ Setting Up Tolgee

Create a file called tolgee.ts in your lib folder (or wherever you manage your config files):

// lib/tolgee.ts
import { Tolgee, DevTools, FormatSimple, ReactPlugin } from '@tolgee/react';

export const tolgee = Tolgee()
  .use(DevTools()) // Optional, for inline editing
  .use(ReactPlugin())
  .use(FormatSimple())
  .init({
    apiUrl: process.env.NEXT_PUBLIC_TOLGEE_API_URL!,
    apiKey: process.env.NEXT_PUBLIC_TOLGEE_API_KEY!,
    language: 'en',
    availableLanguages: ['en', 'id'],
    fallbackLanguage: 'en',
  });

💡 Don’t forget to set your environment variables in .env.local.

🧩 Wrapping Your App with TolgeeProvider

In your layout.tsx file (or wherever your root layout is), wrap the app with the TolgeeProvider.

// app/layout.tsx
import './globals.css';
import { TolgeeProvider } from '@tolgee/react';
import { tolgee } from '@/lib/tolgee';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TolgeeProvider tolgee={tolgee}>
          {children}
        </TolgeeProvider>
      </body>
    </html>
  );
}

🗣️ Translating Text

Now you can translate text using the useTranslate hook!

// app/page.tsx
'use client';

import { useTranslate } from '@tolgee/react';

export default function HomePage() {
  const { t } = useTranslate();

  return (
    <div>
      <h1>{t('hello_world')}</h1>
      <p>{t('welcome_message')}</p>
    </div>
  );
}

🔄 Language Switcher

You can create a simple language switcher like this:

// components/LanguageSwitcher.tsx
'use client';

import { useTolgee } from '@tolgee/react';

export default function LanguageSwitcher() {
  const { changeLanguage, getLanguage } = useTolgee();

  return (
    <select
      value={getLanguage()}
      onChange={(e) => changeLanguage(e.target.value)}
      className="border rounded p-2"
    >
      <option value="en">English</option>
      <option value="id">Bahasa</option>
    </select>
  );
}

✅ Final Thoughts

Tolgee makes localization in React apps super smooth—especially with features like live editing and an easy-to-use UI. If you're looking for a modern alternative to i18next, it’s definitely worth a try.

How about using Next-Intl and Tolgee together? 🤔
That could give you the best of both worlds—structured routing with next-intl and live translation management from Tolgee.

Maybe we’ll talk about that in a future post. Stay tuned! 🚀