What is the correct way to set direction (rtl \ ltr) ? #1738
-
|
Looks like this works, but doesn't feel right to me: class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
// eslint-disable-next-line no-underscore-dangle
const { locale } = this.props.__NEXT_DATA__;
const dir = locale === 'he' ? 'rtl' : 'ltr';
return (
<Html>
<Head />
<body dir={dir}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument; |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
NextJs sets That said, your approach looks fine, except that I'd consume |
Beta Was this translation helpful? Give feedback.
-
|
Just checked: Next.js 15 doesn't auto-handle text direction when setting
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
export default function Layout({ children }) {
const { i18n } = useTranslation()
const setLangDir = () => {
if (i18n.resolvedLanguage) {
document.documentElement.dir = i18n.dir(i18n.resolvedLanguage)
}
}
useEffect(() => {
setLangDir()
},[ i18n, i18n.resolvedLanguage ])
// . . .
}(Tested in Pages router, probably the same in App router) |
Beta Was this translation helpful? Give feedback.
NextJs sets
langon the<html>tag, so I would expect the framework to also handle any RTL concerns.That said, your approach looks fine, except that I'd consume
localefromuseRouter, not__NEXT_DATA__.