Langsys dengan Next.js

Polanya sama di mana pun: server mengambil katalog sekali (write key tetap di sisi server), dan klien menginisialisasi langsys-js-react dari seed tersebut dengan kunci hanya-baca — tanpa pengambilan ganda. Penerjemahan itu sendiri terjadi di browser: HTML yang dikirim server menggunakan bahasa dasar, yang juga diindeks oleh mesin pencari, dan halaman beralih ke bahasa pengunjung saat dimuat.

1 · Ambil katalog di server

Server Component mengambil katalog dengan fetch mentah — SDK tidak diperlukan di server. Write key tetap berada di server; klien mendapatkan kunci read-only. Kedua sisi melihat katalog yang sama — klien hanya melewati pengambilan awal.

// 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 · Inisialisasi di sisi klien

Wrapper 'use client' kecil menginisialisasi SDK di browser dengan katalog yang sudah diisi di awal, sehingga SDK langsung berjalan tanpa mengambil data apa pun. Teks beralih dari bahasa dasar ke bahasa pengunjung saat efek ini dijalankan.

// 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 · Gunakan di mana saja di bawah ini

Dari sini, ini adalah SDK React biasa: useT() di Client Component mana pun, dengan pergantian lokal melalui store yang sama. Pertahankan satu store lokal untuk seluruh aplikasi (dibuat di tempat Anda memanggil init) dan teruskan setLocale ke bawah, alih-alih membuat store baru di pohon komponen yang tidak berkaitan.

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

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