Next.js

Use @stringpush/react with client-only boundaries.

App Router

Wrap client subtrees with TranslationProvider. Add 'use client' to any file that calls useTranslation(), Trans, or overlay APIs.

"use client";

import { TranslationProvider } from "@stringpush/react";

export function AppTranslationProvider({ children }: { children: React.ReactNode }) {
  return (
    <TranslationProvider
      applicationId={process.env.NEXT_PUBLIC_TRANSLATION_APPLICATION_ID!}
      environment="staging"
      locale="en"
      apiKey={process.env.NEXT_PUBLIC_TRANSLATION_RUNTIME_API_KEY!}
      apiBaseUrl={process.env.NEXT_PUBLIC_TRANSLATION_API_URL!}
      origin={typeof window !== "undefined" ? window.location.origin : "http://localhost:3000"}
    >
      {children}
    </TranslationProvider>
  );
}

Mount the provider from app/layout.tsx inside a client wrapper — not in a Server Component.

Environment variables

Use NEXT_PUBLIC_* for values required in the browser. Never expose edit tokens or admin secrets.

Overlay

Overlay, enableEditMode, and WebSocket realtime are client-only. Import them only from 'use client' modules.