由右至左(RTL)支持

为阿拉伯语、希伯来语等 RTL 语言配置你的 Next.js 应用

对由右至左(RTL)语言的支持涉及文本方向与布局镜像,适用于阿拉伯语、希伯来语、波斯语、乌尔都语等。GT 通过 useLocaleDirection hook 提供自动方向检测。

RTL 语言: 超过 5 亿人使用 RTL 语言,包括阿拉伯语、希伯来语、波斯语和乌尔都语。

快速上手

使用 GT 的内置 hooks 自动检测并设置文本方向:

// 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 的实际效果。

这份指南怎么样?

本页内容

由右至左(RTL)支持