Next.js Setup

Install the adapter

npm install tyndale-next

Configuration

Update your Next.js config

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

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

Add the middleware

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

export default createTyndaleMiddleware();

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

This handles locale detection, redirects to locale-prefixed routes, and persists the active locale in a cookie.

Add the server provider to your 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 loads locale data on the server. Set <html dir> yourself with getDirection(locale) in server components or useDirection() in client components.

How it works

withTyndaleConfig reads tyndale.config.json, injects the build-time env vars Tyndale uses at runtime, and aliases tyndale-react so your app shares a single provider context
The middleware redirects requests to locale-prefixed routes, normalizes locale aliases, and sets the locale cookie/header for downstream rendering
TyndaleServerProvider loads translations server-side and makes them available to all components via React context