Next.js-Setup

Adapter installieren

npm install tyndale-next

Konfiguration

Aktualisiere deine Next.js-Konfiguration

import { withTyndaleConfig } from 'tyndale-next/config';

export default withTyndaleConfig({
  // your existing Next.js config
});

Füge die Middleware hinzu

import { createTyndaleMiddleware } from 'tyndale-next/middleware';

export default createTyndaleMiddleware();

export const config = {
  matcher: ['/((?!api|_next|_tyndale|.*\\..*).*)'],
};

Diese übernimmt die Locale-Erkennung, leitet auf Routen mit Locale-Präfix um und speichert die aktive Locale in einem Cookie.

Füge den Server-Provider zu deinem Layout hinzu

import { getDirection, TyndaleServerProvider } from 'tyndale-next/server';

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  return (
    <html lang={locale} dir={getDirection(locale)}>
      <body>
        <TyndaleServerProvider locale={locale}>
          {children}
        </TyndaleServerProvider>
      </body>
    </html>
  );
}

TyndaleServerProvider lädt Locale-Daten auf dem Server. Setze <html dir> selbst mit getDirection(locale) in Server-Komponenten oder useDirection() in Client-Komponenten.

Wie es funktioniert

withTyndaleConfig liest tyndale.config.json, injiziert die Build-Time-Umgebungsvariablen, die Tyndale zur Laufzeit verwendet, und aliasiert tyndale-react, sodass deine App einen gemeinsamen Provider-Kontext nutzt
Die Middleware leitet Anfragen auf Routen mit Locale-Präfix um, normalisiert Locale-Aliase und setzt das Locale-Cookie/-Header für das nachgelagerte Rendering
TyndaleServerProvider lädt Übersetzungen serverseitig und stellt sie allen Komponenten über den React-Kontext zur Verfügung