Configuração do Next.js

Instale o adaptador

npm install tyndale-next

Configuração

Atualize a configuração do Next.js

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

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

Adicione o middleware

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

export default createTyndaleMiddleware();

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

Isto trata da deteção de localidade, redireciona para rotas com prefixo de localidade e persiste a localidade ativa num cookie.

Adicione o provider de servidor ao seu 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 carrega dados de localidade no servidor. Defina <html dir> manualmente com getDirection(locale) em componentes de servidor ou useDirection() em componentes de cliente.

Como funciona

withTyndaleConfig lê tyndale.config.json, injeta as variáveis de ambiente de build-time que o Tyndale usa em runtime e cria um alias para tyndale-react para que a sua app partilhe um único contexto de provider
O middleware redireciona pedidos para rotas com prefixo de localidade, normaliza aliases de localidade e define o cookie/header de localidade para renderização subsequente
TyndaleServerProvider carrega traduções no servidor e disponibiliza-as a todos os componentes através do contexto do React