@sonenta/next

Official Next.js binding for Sonenta i18n — App Router Server Components + Client Components, on the shared @sonenta/i18n-core engine (server) and @sonenta/react-i18next (client).

Beta (0.1.x). App Router first; Pages Router works via the same server helpers. next, react, i18next, react-i18next are peers.

npm install @sonenta/next i18next react-i18next

Server Components (App Router)

// app/[locale]/page.tsx  (Server Component)
import { getTranslations } from "@sonenta/next/server";

const config = {
  token: process.env.SONENTA_API_KEY!,
  projectUuid: "your-project-uuid",
  defaultLocale: "fr",
  revalidate: 3600, // Next data-cache (ISR) for the CDN fetch
};

export default async function Page({ params: { locale } }: { params: { locale: string } }) {
  const { t } = await getTranslations(config, locale);
  return <h1>{t("home.title")}</h1>;
}

Server resolution reuses the same engine as every Sonenta binding, so it matches the client exactly (interpolation, plurals, fallback).

Client Components

Hydrate the client provider from the server snapshot — no client refetch:

// app/[locale]/layout.tsx (Server Component)
import { getBundles } from "@sonenta/next/server";
import { Providers } from "./providers";

export default async function Layout({ children, params: { locale } }) {
  const initialBundles = await getBundles(config, locale);
  return <Providers locale={locale} initialBundles={initialBundles}>{children}</Providers>;
}

// app/[locale]/providers.tsx
"use client";
import { SonentaProvider } from "@sonenta/next/client";

export function Providers({ locale, initialBundles, children }: any) {
  return (
    <SonentaProvider
      token={process.env.NEXT_PUBLIC_SONENTA_API_KEY!}
      projectUuid="your-project-uuid"
      defaultLocale={locale}
      initialBundles={initialBundles}
    >
      {children}
    </SonentaProvider>
  );
}

// any "use client" component
"use client";
import { useTranslation } from "@sonenta/next/client";
export function Cta() {
  const { t } = useTranslation();
  return <button>{t("cta.start")}</button>;
}

License

MIT © Sonenta