右から左（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 言語を自動検出し、正しい表示方向を適用します。
General Translation のウェブサイトで、英語とアラビア語を見比べて、RTL の挙動を確認してください。
このガイドはいかがですか?