Configurazione di Next.js

Installa l’adapter

npm install tyndale-next

Configurazione

Aggiorna la configurazione di Next.js

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

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

Aggiungi il middleware

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

export default createTyndaleMiddleware();

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

Questo gestisce il rilevamento della locale, i redirect verso route con prefisso della locale e mantiene la locale attiva in un cookie.

Aggiungi il provider server al tuo 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 carica i dati della locale sul server. Imposta tu stesso <html dir> con getDirection(locale) nei componenti server oppure useDirection() nei componenti client.

Come funziona

withTyndaleConfig legge tyndale.config.json, inietta le variabili d’ambiente di build-time che Tyndale usa in runtime e crea un alias per tyndale-react così la tua app condivide un unico provider context
Il middleware reindirizza le richieste verso route con prefisso della locale, normalizza gli alias delle locale e imposta il cookie/header della locale per il rendering a valle
TyndaleServerProvider carica le traduzioni lato server e le rende disponibili a tutti i componenti tramite il React context