Настройка Next.js

Установите адаптер

npm install tyndale-next

Конфигурация

Обновите конфигурацию Next.js

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

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

Добавьте middleware
middleware.ts
```
import { createTyndaleMiddleware } from 'tyndale-next/middleware';

export default createTyndaleMiddleware();

export const config = {
  matcher: ['/((?!api|_next|_tyndale|.*\\..*).*)'],
};
```
Это обрабатывает определение локали, редиректы на маршруты с префиксом локали и сохраняет активную локаль в cookie.

Добавьте серверный provider в ваш 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 загружает данные локали на сервере. Установите <html dir> самостоятельно с помощью getDirection(locale) в серверных компонентах или useDirection() в клиентских компонентах.

Как это работает

withTyndaleConfig читает tyndale.config.json, внедряет переменные окружения времени сборки, которые Tyndale использует во время выполнения, и задаёт алиас tyndale-react, чтобы ваше приложение использовало единый контекст provider
Middleware перенаправляет запросы на маршруты с префиксом локали, нормализует алиасы локалей и устанавливает cookie/header локали для последующего рендеринга
TyndaleServerProvider загружает переводы на стороне сервера и делает их доступными всем компонентам через контекст React