Next.js セットアップ

アダプターをインストール

npm install tyndale-next

設定

Next.js config を更新

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|.*\\..*).*)'],
};
```
これにより、locale の検出、locale プレフィックス付きルートへのリダイレクト、そして有効な locale の cookie への永続化が行われます。

レイアウトにサーバープロバイダーを追加

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 はサーバー上で locale データを読み込みます。サーバーコンポーネントでは getDirection(locale)、クライアントコンポーネントでは useDirection() を使って、自分で <html dir> を設定してください。

仕組み

withTyndaleConfig は tyndale.config.json を読み取り、Tyndale がランタイムで使用するビルド時の環境変数を注入し、tyndale-react にエイリアスを設定して、アプリが単一の provider context を共有できるようにします
middleware はリクエストを locale プレフィックス付きルートへリダイレクトし、locale エイリアスを正規化し、下流のレンダリングのために locale cookie/header を設定します
TyndaleServerProvider はサーバーサイドで翻訳を読み込み、React context を通じてすべてのコンポーネントで利用できるようにします