Intégration Next.js

Lingo.dev Compiler s'intègre parfaitement avec le routeur d'application Next.js pour fournir une localisation au moment de la compilation sans modifier vos composants React.

Suivez ces étapes pour ajouter la prise en charge multilingue à votre application Next.js.

Ou explorez le projet de démonstration Next.js pour essayer le Compiler en action.

Prérequis

  • Next.js 13+ avec App Router
  • React 18+
  • Node.js 18 ou supérieur

Étape 1. Installer le package

Installez le package lingo.dev :

npm install lingo.dev

Étape 2. Configurer Next.js

Importez et configurez le compilateur dans votre fichier next.config.js :

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Votre configuration Next.js existante
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
})(nextConfig);

Étape 3. Configurer l'authentification

Lingo.dev Compiler envoie votre contenu aux moteurs de traduction IA pour la localisation, vous devez donc vous authentifier d'abord.

Option 1. Moteur Lingo.dev

Lingo.dev Compiler peut utiliser le Moteur Lingo.dev comme votre moteur de traduction IA. Il offre une sélection dynamique de modèles, un routage automatique, une mémoire de traduction et la prise en charge de glossaires. Des options gratuites et payantes sont disponibles.

Pour vous authentifier, exécutez :

npx lingo.dev@latest login

Si vous rencontrez des problèmes avec le flux du navigateur, vous pouvez ajouter manuellement une clé LINGODOTDEV_API_KEY à votre fichier .env.local :


# .env.local

LINGODOTDEV_API_KEY=...

Vous trouverez le jeton dans les Paramètres de Projet de votre Moteur Lingo.dev.

Option 2. Fournisseur LLM alternatif

Alternativement, vous pouvez utiliser des modèles provenant de fournisseurs LLM pris en charge :

Ajoutez votre/vos clé(s) API à votre fichier .env.local :


# .env.local

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...

Remarque : Assurez-vous d'activer votre compte auprès du fournisseur LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.

Étape 4. Ajouter le fournisseur

Importez le fournisseur dans votre layout racine (app/layout.tsx) :

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Étape 5. Optionnel : Ajouter un sélecteur de langue

Créez un composant de sélection de langue :

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

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

Étape 6. Compiler et tester

Démarrez votre serveur de développement :

npm run dev

Le compilateur va automatiquement :

  1. Scanner vos composants React pour le contenu traduisible
  2. Extraire les clés de traduction
  3. Générer des traductions optimisées par IA
  4. Créer des fichiers de traduction optimisés dans le répertoire lingo/

Visitez http://localhost:3000 pour voir votre application multilingue en action.

Options de configuration

Vous pouvez personnaliser le comportement du compilateur :

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Par défaut pour Next.js
  lingoDir: "lingo", // Répertoire des fichiers de traduction
  rsc: true, // Activer la prise en charge des React Server Components
  debug: false, // Activer la journalisation de débogage
})(nextConfig);

Composants serveur et client

Lingo.dev Compiler fonctionne avec les composants serveur et client :

Composants serveur

Les composants serveur sont traités au moment de la compilation avec une prise en charge complète de la traduction :

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

Composants client

Les composants client reçoivent des bundles de traduction optimisés :

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Déploiement en production

  1. Compilez votre application :

    npm run build

  2. Validez les fichiers de traduction :

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

  3. Déployez en utilisant votre plateforme préférée (Vercel, Netlify, etc.)

Votre application Next.js servira automatiquement du contenu localisé en fonction des préférences de l'utilisateur ou des modèles d'URL.

Prochaines étapes