右から左（RTL）対応
Next.js アプリをアラビア語、ヘブライ語などの RTL 言語向けに設定する
右から左（RTL）の言語対応は、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語などにおけるテキスト方向とレイアウトのミラーリングを扱います。GT は useLocaleDirection フックにより、テキスト方向を自動検出します。
RTL 言語: アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語など、RTL 言語の話者は世界で5億人以上にのぼります。
迅速なセットアップ
GT の組み込みフックを使って、テキストの方向を自動検出し、設定します。
// app/[locale]/layout.tsx
import { useLocale, useLocaleDirection, GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
const locale = useLocale(); // 例: アラビア語なら "ar"
const dir = useLocaleDirection(); // 例: 右から左なら "rtl"
return (
<html lang={locale} dir={dir}>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
);
}以上です。GT は RTL 言語を自動検出し、適切な表示方向を返します。
RTL の挙動は、General Translation のウェブサイトで English と Arabic を見比べると確認できます。
このガイドはどうでしたか？