Utiliser Sonenta avec Next.js

1 · Créez un projet et récupérez vos clés

Connectez-vous, créez un projet, copiez son UUID. Gérez clés et traductions depuis votre éditeur IA via MCP, la CLI, ou le dashboard.

Ouvrir le dashboard →

2 · Installez le SDK

npm i @sonenta/next i18next react-i18next

3 · Initialisez Sonenta

Branchez le SDK avec votre token de projet, votre UUID et vos namespaces. Les langues disponibles viennent du manifest CDN publié, donc pas de tableau locales. Il récupère les bundles publiés et les résout via le moteur partagé.

// app/[locale]/providers.tsx
"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 · Traduisez dans vos composants

Utilisez le binding natif du framework : votre appel de traduction habituel, propulsé par 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";

Gérez clés et traductions depuis votre éditeur : demandez à votre agent via le MCP Sonenta, ou la CLI. Aucune saisie manuelle de clés.