Next.js で使う Langsys

どの環境でもパターンは同じです。サーバーがカタログを1回だけ取得し（書き込みキーはサーバー側に保持）、クライアントは読み取り専用キーを使ってそのシードから langsys-js-react を初期化します。重複した取得は発生しません。翻訳そのものはブラウザー上で行われます。サーバーが送信する HTML は基準言語のままで、検索エンジンにインデックスされるのもこの言語です。ページは読み込み時に訪問者の言語へ切り替わります。

1 · サーバーでカタログを取得する

Server Componentは、素のfetchでカタログを取得します。サーバー側ではSDKは不要です。書き込みキーはサーバー側に保持され、クライアントには読み取り専用キーが渡されます。どちらも同じカタログを参照し、クライアント側は最初のフェッチを省略するだけです。

// 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 · クライアントで初期化する

小さな 'use client' ラッパーが、シード済みカタログを使ってブラウザで SDK を初期化するため、何も取得せずに起動できます。この処理が実行されると、テキストは基本言語から訪問者の言語に切り替わります。

// 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 · 以下のどこでも使用する

ここからは通常の React SDK と同じです。クライアントコンポーネントならどこでも useT() を使え、ロケールの切り替えも同じストアで行います。ロケールストアはアプリ全体で 1 つ（init を呼び出す場所で作成）にして、関連のないツリーごとに新しいストアを作らず、setLocale を下位に渡してください。

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

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