Next.js

The official @sonenta/next SDK loads your released translations from the Sonenta CDN, resolved by the same shared engine as every other framework, so keys behave identically across React, Vue, Svelte and Next.js.

1. Create a project & get your keys

Sign in, create a project, copy its UUID. Manage keys and translations from your AI editor over MCP, the CLI, or the dashboard.

Open the dashboard

2. Install the SDK

npm i @sonenta/next i18next react-i18next

3. Initialize Sonenta

Wire the SDK with your project token, UUID and namespaces. Available languages come from the published CDN manifest, so there is no locales array. It fetches the released bundles and resolves them through the shared engine.

"use client";
import { SonentaProvider } from "@sonenta/next/client";

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

4. Translate in your components

Use the framework-native binding: your usual translation call, backed by Sonenta:

// app/[locale]/layout.tsx (Server): seed the provider
import { getBundles } from "@sonenta/next/server";
const config = { token: process.env.SONENTA_TOKEN, projectUuid: "<your-project-uuid>", defaultLocale: "fr" };
const initialBundles = await getBundles(config, params.locale);

// app/[locale]/page.tsx (Server Component): translate on the server
import { getTranslations } from "@sonenta/next/server";
const { t } = await getTranslations(config, params.locale);
// then: <h1>{t("home.title")}</h1>

// In any "use client" component:
import { useTranslation } from "@sonenta/next/client";

Manage keys and translations from your editor: ask your agent over the Sonenta MCP, or use the CLI. No manual key entry.