Langsys met Next.js

Het patroon is overal hetzelfde: de server haalt de catalogus één keer op (de schrijfsleutel blijft aan de serverkant) en de client initialiseert langsys-js-react met die seed en een alleen-lezensleutel, zonder dubbele ophaalactie. Het vertalen zelf gebeurt in de browser: de HTML die de server verstuurt is in de basistaal, en die indexeren zoekmachines ook, waarna de pagina tijdens het laden overschakelt naar de taal van de bezoeker.

1 · Haal de catalogus op de server op

Een Server Component haalt de catalogus op met een gewone fetch — de SDK is op de server niet nodig. De schrijfsleutel blijft op de server; de client krijgt een alleen-lezensleutel. Beide kanten zien dezelfde catalogus — de client slaat alleen het eerste ophalen over.

// 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 · Initialiseren op de client

Een kleine 'use client'-wrapper initialiseert de SDK in de browser met de geseede catalogus, zodat deze start zonder iets op te halen. De tekst schakelt van de basistaal naar de taal van de bezoeker zodra dit effect wordt uitgevoerd.

// 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 · Gebruik het overal hieronder

Vanaf hier is het gewoon de React SDK: useT() in elke Client Component, taalwisseling via dezelfde store. Houd één locale store aan voor de app (aangemaakt waar je init aanroept) en geef setLocale door naar beneden, in plaats van nieuwe stores aan te maken in niet-gerelateerde componentbomen.

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

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