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

Créez un compte gratuit sur groq.com et ajoutez votre clé API :


# .env.local

GROQ_API_KEY=gsk_...

É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. Analyser vos composants React pour identifier 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