Right-to-left support
Configure your Next.js app for Arabic, Hebrew and other RTL languages
Right-to-left (RTL) language support manages text direction and layout mirroring for languages such as Arabic, Hebrew, Persian and Urdu. GT provides automatic direction detection via 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 applies the correct direction.
Compare the General Translation website in English and Arabic to see RTL in action.
How is this guide?