Configuración de Next.js

Instala el adaptador

npm install tyndale-next

Configuración

Actualiza la configuración de Next.js

import { withTyndaleConfig } from 'tyndale-next/config';

export default withTyndaleConfig({
  // your existing Next.js config
});

Agrega el middleware

import { createTyndaleMiddleware } from 'tyndale-next/middleware';

export default createTyndaleMiddleware();

export const config = {
  matcher: ['/((?!api|_next|_tyndale|.*\\..*).*)'],
};

Esto gestiona la detección del locale, redirige a rutas con prefijo de locale y mantiene el locale activo en una cookie.

Agrega el proveedor de servidor a tu layout

import { getDirection, TyndaleServerProvider } from 'tyndale-next/server';

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  return (
    <html lang={locale} dir={getDirection(locale)}>
      <body>
        <TyndaleServerProvider locale={locale}>
          {children}
        </TyndaleServerProvider>
      </body>
    </html>
  );
}

TyndaleServerProvider carga los datos del locale en el servidor. Establece <html dir> tú mismo con getDirection(locale) en componentes de servidor o useDirection() en componentes de cliente.

Cómo funciona

withTyndaleConfig lee tyndale.config.json, inyecta las variables de entorno de build-time que Tyndale usa en runtime y crea un alias de tyndale-react para que tu aplicación comparta un único contexto de proveedor
El middleware redirige las solicitudes a rutas con prefijo de locale, normaliza alias de locale y establece la cookie/header de locale para el renderizado posterior
TyndaleServerProvider carga traducciones del lado del servidor y las pone a disposición de todos los componentes mediante el contexto de React