Next.js Integration

Lingo.dev Compiler integriert sich nahtlos in den Next.js App Router, um Lokalisierung zur Build-Zeit bereitzustellen, ohne dass Ihre React-Komponenten modifiziert werden müssen.

Befolgеn Sie diese Schritte, um Ihrer Next.js-Anwendung mehrsprachige Unterstützung hinzuzufügen.

Oder erkunden Sie das Next.js-Demoprojekt, um den Compiler in Aktion zu erleben.

Voraussetzungen

  • Next.js 13+ mit App Router
  • React 18+
  • Node.js 18 oder höher

Schritt 1. Paket installieren

Installieren Sie das lingo.dev Paket:

npm install lingo.dev

Schritt 2. Next.js konfigurieren

Importieren und konfigurieren Sie den Compiler in Ihrer next.config.js:

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Ihre bestehende Next.js-Konfiguration
};

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

Schritt 3. Authentifizierung einrichten

Erstellen Sie ein kostenloses Konto auf groq.com und fügen Sie Ihren API-Schlüssel hinzu:


# .env.local

GROQ_API_KEY=gsk_...

Schritt 4. Provider hinzufügen

Importieren Sie den Provider in Ihrem Root-Layout (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>
  );
}

Schritt 5. Optional: Sprachumschalter hinzufügen

Erstellen Sie eine Sprachumschalter-Komponente:

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

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

Schritt 6. Bauen und testen

Starten Sie Ihren Entwicklungsserver:

npm run dev

Der Compiler wird automatisch:

  1. Ihre React-Komponenten nach übersetzbaren Inhalten scannen
  2. Übersetzungsschlüssel extrahieren
  3. KI-gestützte Übersetzungen generieren
  4. Optimierte Übersetzungsdateien im Verzeichnis lingo/ erstellen

Besuchen Sie http://localhost:3000, um Ihre mehrsprachige App in Aktion zu sehen.

Konfigurationsoptionen

Sie können das Verhalten des Compilers anpassen:

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Standard für Next.js
  lingoDir: "lingo", // Verzeichnis für Übersetzungsdateien
  rsc: true, // Unterstützung für React Server Components aktivieren
  debug: false, // Debug-Logging aktivieren
})(nextConfig);

Server- und Client-Komponenten

Lingo.dev Compiler funktioniert sowohl mit Server- als auch mit Client-Komponenten:

Server-Komponenten

Server-Komponenten werden zur Build-Zeit mit vollständiger Übersetzungsunterstützung verarbeitet:

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

Client-Komponenten

Client-Komponenten erhalten optimierte Übersetzungspakete:

"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>
  );
}

Produktionsdeployment

  1. Anwendung bauen:

    npm run build

  2. Übersetzungsdateien committen:

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

  3. Deployment über Ihre bevorzugte Plattform (Vercel, Netlify, etc.)

Ihre Next.js-Anwendung stellt automatisch lokalisierte Inhalte basierend auf Benutzereinstellungen oder URL-Mustern bereit.

Nächste Schritte