Next.js ile Langsys

Desen her yerde aynıdır: sunucu kataloğu bir kez çeker (yazma anahtarı sunucu tarafında kalır) ve istemci, bu başlangıç verisinden salt okunur bir anahtarla langsys-js-react başlatır — yinelenen çekme olmaz. Çevirinin kendisi tarayıcıda gerçekleşir: sunucunun gönderdiği HTML temel dildedir, arama motorları da bunu dizinler; sayfa yüklenirken ziyaretçinin diline geçer.

1 · Kataloğu sunucuda getirin

Bir Server Component kataloğu ham bir fetch ile getirir — sunucuda SDK'ya gerek yoktur. Yazma anahtarı sunucuda kalır; istemci salt okunur bir anahtar alır. Her iki taraf da aynı kataloğu görür — istemci yalnızca ilk getirme işlemini atlar.

// 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 · İstemci tarafında başlatın

Küçük bir 'use client' sarmalayıcısı, SDK'yı tarayıcıda önceden yüklenmiş katalogla başlatır; böylece hiçbir şey getirmeden çalışmaya başlar. Bu efekt çalıştığında metin, temel dilden ziyaretçinin diline geçer.

// 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 · Aşağıda her yerde kullanın

Buradan sonrası sade React SDK'sıdır: herhangi bir Client Component içinde useT(), aynı depo üzerinden dil değiştirme. Uygulama için tek bir dil deposu tutun (init çağırdığınız yerde oluşturulur) ve ilgisiz ağaçlarda yeni depolar oluşturmak yerine setLocale'i aşağıya aktarın.

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

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