Langsys con Next.js

El patrón es el mismo en todos los casos: el servidor obtiene el catálogo una sola vez (la clave de escritura permanece en el servidor) y el cliente inicializa langsys-js-react a partir de esa precarga con una clave de solo lectura, sin descargas duplicadas. La traducción en sí ocurre en el navegador: el HTML que envía el servidor está en el idioma base, que es también el que indexan los motores de búsqueda, y la página cambia al idioma del visitante mientras se carga.

1 · Obtén el catálogo en el servidor

Un Server Component obtiene el catálogo con un fetch directo; el SDK no es necesario en el servidor. La clave de escritura permanece en el servidor; el cliente recibe una clave de solo lectura. Ambas mitades ven el mismo catálogo; el cliente simplemente omite la obtención inicial.

// 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 · Inicializa en el cliente

Un pequeño contenedor 'use client' inicializa el SDK en el navegador con el catálogo precargado, por lo que arranca sin tener que obtener nada. El texto cambia del idioma base al idioma del visitante cuando se ejecuta este efecto.

// 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 · Úsalo en cualquier lugar a partir de aquí

A partir de aquí es el SDK de React normal: useT() en cualquier componente de cliente y el cambio de idioma mediante el mismo store. Mantén un solo store de idioma para la app (creado donde llamas a init) y pasa setLocale hacia abajo, en lugar de crear stores nuevos en árboles no relacionados.

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

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