Right-to-Left Support
Configure your Next.js app for Arabic, Hebrew, and other RTL languages
Right-to-left (RTL) language support handles text direction and layout mirroring for languages like Arabic, Hebrew, Persian, and Urdu. GT provides automatic direction detection through the useLocaleDirection hook.
RTL languages: Over 500 million people speak RTL languages including Arabic, Hebrew, Persian, and Urdu.
Quick Setup
Use GT's built-in hooks to automatically detect and set text direction:
// app/[locale]/layout.tsx
import { useLocale, useLocaleDirection, GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
const locale = useLocale(); // e.g. "ar" for Arabic
const dir = useLocaleDirection(); // e.g. "rtl" for right-to-left
return (
<html lang={locale} dir={dir}>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
);
}That's it! GT automatically detects RTL languages and returns the correct direction.
Compare with the General Translation website in English vs Arabic to see RTL in action.
How is this guide?