React Router / Remix Integration

Lingo.dev Compiler works seamlessly with React Router and the latest Remix (which is now React Router v7) to provide build-time localization.

Follow these steps to add multilingual support to your React Router or Remix application.

Or explore the React Router / Remix demo project to try the Compiler in action.

Prerequisites

  • React Router v6+ or Remix
  • Vite as the build tool
  • React 18+
  • Node.js 18 or higher

Step 1. Install Package

Install the lingo.dev package:

npm install lingo.dev

Step 2. Configure Vite

Import and configure the compiler in your vite.config.ts:

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Your existing Vite configuration
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Step 3. Set Up Authentication

Create a free account at groq.com and add your API key:

# .env
GROQ_API_KEY=gsk_...

Step 4. Add Provider

For React Router

Import the provider in your root component (app/root.tsx):

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

// For React Router with data loaders
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

For Remix

Import the provider in your root route (app/root.tsx):

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

export async function loader(args: LoaderFunctionArgs) {
  return json({
    lingoDictionary: await loadDictionary(args.request),
  });
}

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

Step 5. Optional: Add Locale Switcher

Create a language switcher component:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <nav>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </nav>
    </header>
  );
}

Step 6. Build and Test

Start your development server:

npm run dev

The compiler will automatically:

  1. Scan your React components for translatable content
  2. Extract translation keys
  3. Generate AI-powered translations
  4. Create optimized translation files in the lingo/ directory

Visit http://localhost:5173 to see your multilingual app in action.

Configuration Options

You can customize the compiler behavior:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Server-Side Rendering

The compiler works with both client-side and server-side rendering:

Client Components

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

Route Components

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

Production Deployment

  1. Build your application:

    npm run build

  2. Commit translation files:

    git add lingo/
git commit -m "Add translations"

  3. Deploy using your preferred platform

Your React Router or Remix app will serve localized content automatically based on user preferences or URL patterns.

Next Steps