Configuration Next.js

Installer l’adaptateur

npm install tyndale-next

Configuration

Mettez à jour votre configuration Next.js

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

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

Ajoutez le middleware

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

export default createTyndaleMiddleware();

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

Cela gère la détection de la locale, les redirections vers des routes préfixées par la locale, et conserve la locale active dans un cookie.

Ajoutez le provider serveur à votre 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 charge les données de locale côté serveur. Définissez vous-même <html dir> avec getDirection(locale) dans les composants serveur ou useDirection() dans les composants client.

Fonctionnement

withTyndaleConfig lit tyndale.config.json, injecte les variables d’environnement au moment du build que Tyndale utilise à l’exécution, et crée un alias vers tyndale-react afin que votre application partage un contexte de provider unique
Le middleware redirige les requêtes vers des routes préfixées par la locale, normalise les alias de locale, et définit le cookie/header de locale pour le rendu en aval
TyndaleServerProvider charge les traductions côté serveur et les met à disposition de tous les composants via le contexte React