Langsys mit Next.js

Das Muster ist überall dasselbe: Der Server ruft den Katalog einmal ab (der Schreibschlüssel bleibt serverseitig), und der Client initialisiert langsys-js-react mit diesem Seed und einem schreibgeschützten Schlüssel – ohne doppelten Abruf. Die Übersetzung selbst erfolgt im Browser: Das HTML, das der Server sendet, liegt in der Basissprache vor, die auch von Suchmaschinen indexiert wird, und die Seite wechselt beim Laden in die Sprache des Besuchers.

1 · Den Katalog auf dem Server abrufen

Eine Server Component ruft den Katalog mit einem einfachen fetch ab – das SDK wird auf dem Server nicht benötigt. Der Schreibschlüssel bleibt auf dem Server; der Client erhält einen schreibgeschützten Schlüssel. Beide Seiten sehen denselben Katalog – der Client überspringt lediglich den ersten Abruf.

// app/layout.tsx (Server Component)
import type { iCategories } from 'langsys-js-react';
import { LangsysClient } from './LangsysClient';

async function getTranslations(locale: string): Promise<iCategories> {
  const res = await fetch(
    `https://api.langsys.dev/api/projects/${process.env.LANGSYS_PROJECT_ID}/translations?locale=${locale}`,
    { headers: { 'x-Authorization': process.env.LANGSYS_API_KEY! } }
  );
  const result = await res.json();
  return result.data as iCategories;
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const locale = 'en-US'; // from cookie / Accept-Language / route segment
  const translations = await getTranslations(locale);

  return (
    <html lang={locale}>
      <body>
        <LangsysClient
          locale={locale}
          translations={translations}
          projectId={process.env.LANGSYS_PROJECT_ID!}
          apiKey={process.env.NEXT_PUBLIC_LANGSYS_API_KEY!} // read-only
        >
          {children}
        </LangsysClient>
      </body>
    </html>
  );
}

2 · Auf dem Client initialisieren

Ein kleiner 'use client'-Wrapper initialisiert das SDK im Browser mit dem vorbefüllten Katalog, sodass es startet, ohne etwas abzurufen. Der Text wechselt von der Basissprache zur Sprache des Besuchers, sobald dieser Effekt ausgeführt wird.

// app/LangsysClient.tsx
'use client';

import { useEffect, type ReactNode } from 'react';
import { LangsysApp, useLocaleStore, type iCategories } from 'langsys-js-react';

export function LangsysClient(props: {
  locale: string;
  translations: iCategories;
  projectId: string;
  apiKey: string;
  children: ReactNode;
}) {
  const [, , localeStore] = useLocaleStore(props.locale);

  useEffect(() => {
    LangsysApp.init({
      projectid: props.projectId,
      key: props.apiKey,
      UserLocaleStore: localeStore,
      initialTranslations: props.translations,
      initialTranslationsLocale: props.locale,
      ssrTokenStrategy: 'client',
    });
  }, [localeStore, props.projectId, props.apiKey, props.translations, props.locale]);

  return <>{props.children}</>;
}

3 · Überall unten verwenden

Ab hier ist es das normale React-SDK: useT() in jeder Client-Komponente, Sprachwechsel über denselben Store. Verwenden Sie für die App einen einzigen Locale-Store (dort erstellt, wo Sie init aufrufen) und reichen Sie setLocale nach unten weiter, statt in voneinander unabhängigen Bäumen neue Stores anzulegen.

'use client';
import { useT } from 'langsys-js-react';

export function Hero() {
  const t = useT();
  return <h1>{t('Welcome to our store', 'Home')}</h1>;
}