@transglot/next

SSR-aware Next.js helpers over @transglot/runtime. Fetch a locale's published bundle on the server, hand the page a serializable snapshot, and hydrate a client provider from it so there is no refetch flash.

• Server entry @transglot/next has no React import, so it is safe in a React Server Component, a route handler, or getServerSideProps.
• Client entry @transglot/next/client is the 'use client' boundary: NextTranslateProvider, useTranslations, <T>.

Install

npm install @transglot/next @transglot/runtime

Server: load a snapshot

loadTranslations(options) returns a serializable TranslateSnapshot. Its options are the same CDN coordinates the runtime client takes:

| option | required | meaning | | --- | --- | --- | | baseUrl | yes | origin of the app / CDN, e.g. https://app.example.com | | project | yes | numeric project id (the CDN URL segment) | | cdnKey | yes | read-only taicdn_… key (server-side only; never sent to the browser) | | locale | yes | the locale to fetch | | version | no | pin an immutable …/v{n} version instead of "latest" | | fetchImpl | no | injected fetch (defaults to the global) |

import { loadTranslations } from '@transglot/next';

const snapshot = await loadTranslations({
  baseUrl: 'https://app.example.com',
  project: 42,
  cdnKey: process.env.TRANSGLOT_CDN_KEY!,
  locale: 'en',
});

Client: seed the provider

'use client';
import { NextTranslateProvider, useTranslations, T } from '@transglot/next/client';

export function Providers({ snapshot, children }) {
  return <NextTranslateProvider snapshot={snapshot}>{children}</NextTranslateProvider>;
}

function Title() {
  const { t } = useTranslations();
  return <h1>{t('home.title')}</h1>;
}

The full runtime client contract (the createClient options above, plus t, loadLocale, setLocale, preload, onChange) is documented in @transglot/runtime. createClient and ClientOptions are re-exported here so a host needs only one import.