How to dynamically set dir attribute based on locale in NextJS 10? #19049

oahmaro · 2020-11-11T10:09:42Z

oahmaro
Nov 11, 2020

I am experimenting with the new NextJS internationalisation support, and I would like to add a dir attribute to the html tag and dynamically change it based on active locale, to properly support RTL languages.

An example code would be appreciated.

Thanks

Answered by puntope

Nov 11, 2020

In case you want to change HTML structure you need custom document.

Create a file like -> pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        // locale is in ctx.locale

        return { ...initialProps, locale: ctx?.locale || 'es' }
    }
   
    render = () => (
        <Html dir={this.props.locale === 'ar' ? 'rtl': 'ltr'} lang={this.props.locale}>
            <Head />
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

export default …

View full answer

puntope · 2020-11-11T18:06:48Z

puntope
Nov 11, 2020

In case you want to change HTML structure you need custom document.

Create a file like -> pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        // locale is in ctx.locale

        return { ...initialProps, locale: ctx?.locale || 'es' }
    }
   
    render = () => (
        <Html dir={this.props.locale === 'ar' ? 'rtl': 'ltr'} lang={this.props.locale}>
            <Head />
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

export default MyDocument

For doing it inside a component. Try this. Using useRouter

TestLocale.jsx

import { useRouter } from 'next/router'

const TestLocale = () =>  {
  const {locale} = useRouter()

 // locale provides you with the locale, and you can conditionally do stuff

  return (
    <div dir={locale === 'ar' ? 'rtl' : 'ltr'}>
      Locale: {locale}
    </div>
  )
}

export default TestLocale

More info:

https://nextjs.org/docs/advanced-features/i18n-routing#accessing-the-locale-information
https://nextjs.org/docs/advanced-features/custom-document

11 replies

monafHorany Apr 26, 2021

Document's getInitialProps function is not called during client-side transitions, nor when a page is statically optimized.

monafHorany Apr 26, 2021

to solve this problem of refreshing you should use useRouter in _app file after you created _document file .

import {useRouter} from 'next/router';

function MyApp({ Component, pageProps }) {

const { locale } = useRouter();
const dir = locale === 'ar' ? 'rtl' : 'ltr';

useEffect(() => {
document.documentElement.dir = dir;
},[dir]);

return (
<Component {...pageProps} />
)
}

you saved my life man

dmytromod Jul 21, 2021

_document file rendered on the server, so react hooks and client interactions as onClick will not work on it.

You need to split the logic and set default values (initial values as on hard refresh) in _document file:

render() {
    const {locale} = this.props.__NEXT_DATA__;
    const dir = locale === 'ar' ? 'rtl' : 'ltr';

    return (
      <Html lang={locale}>
       ..............
     <body dir={dir}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );

and add client code on _app file or component where you make a lang/dir changes:

const router = useRouter();
const {defaultLocale, locale} = router;


React.useEffect(() => {
    const dir = locale === 'he' ? 'rtl' : 'ltr';
    document.querySelector("body").setAttribute("dir", dir);
  }, [locale]);

AbdElRahman111192 Sep 7, 2022

@monafHorany @dmytromod , thanks a lot

foadtkf Oct 30, 2023

Bro.. this ans just saved my day🔥

usameje · 2021-04-29T11:18:28Z

usameje
Apr 29, 2021

I tried the snippet above and the dynamically (lang) attribute disappeared.

Here is the updated snippet:

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    const { locale } = this.props.__NEXT_DATA__;
    const dir = locale === 'ar' ? 'rtl' : 'ltr';
    return (
      <Html lang={locale} dir={dir}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

0 replies

HossamMarey · 2021-07-02T18:20:53Z

HossamMarey
Jul 2, 2021

to add dynamic changer use

useEffect(() => {
    let dir =locale == "ar" ? "rtl" : "ltr";
    let lang = locale == "ar" ? "ar" : "en";
    document.querySelector("html").setAttribute("dir", dir);
    document.querySelector("html").setAttribute("lang", lang);
  }, [locale]);

0 replies

Mood-al · 2021-07-17T15:49:39Z

Mood-al
Jul 17, 2021

hey guys is there a possible way to add conditional css import my idea is to load diffrent css files based on the dir attribute
i mean when the language is arabic dir="rtl" i want to import main.rtl.css and when it's something else i want to load main.css

so i there any possible way to do this mechanic in next js ??

currently i'm acheiving this using Head component by serving diffrent link tags when the locale is ar
by doing this `

    {locale == "ar" && (
      <link rel="stylesheet" href="/styles/main.rtl.css" />
    )}
  </Head> `

but i dont know if this is good for performance or not

3 replies

markus-azer Aug 1, 2021

Hi @Mood-al
did you find best practice for this issue?

Mood-al Aug 1, 2021

Currently I'm adding a rtl class to body tag
And using it inside main.rtl.css like so

.rtl h3 {text-align : right } for instance

And I'm importing the main.rtl.css file right under the main.css so it can override its styles

I dont know if it's best practice or not but so far i havent had any issues with it

Or you can do it as i did at the beginning
I loaded it inside component by using link tag

m5m5h Aug 10, 2021

can i do this with tailwindcss ?

SSylvain1989 · 2021-09-14T09:46:41Z

SSylvain1989
Sep 14, 2021

Dynamic html and script work fine for me

import Document, {
  Html, Head, Main, NextScript,
} from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // locale is in ctx.locale

    return { ...initialProps, locale: ctx?.locale || 'en' };
  }

  render = () => (
    <Html dir={this.props.locale === 'fr' ? 'fr' : 'en'} lang={this.props.locale}>
      <Head />
      <body>
        <Main />
        <NextScript />
        {this.props.locale === 'fr'
          ? (
            <>
            <script dangerouslySetInnerHTML={{
              __html: 'french script',
            }} />
            </>
          ) : (
            <script dangerouslySetInnerHTML={{
              __html: 'english script',
            }} />
          )}
      </body>
    </Html>
  )
}

export default MyDocument;

0 replies

OsamaNaxxa · 2022-08-07T14:21:59Z

OsamaNaxxa
Aug 7, 2022

Using a functional Component you can just add following code, and for versions above 10 lang attribute is automatically handled.

import { Head, Html, Main, NextScript } from "next/document";

function Document(props: any) {

  return (
    <Html dir={props.__NEXT_DATA__.locale === "en" ? "ltr" : "rtl"}>
      <Head>

      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;

1 reply

wedhimd Nov 7, 2022

Thanks, It worked for me.

aynzad · 2022-09-22T12:20:09Z

aynzad
Sep 22, 2022

Also, there is a CSS hack to change the direction that may seems very basic but it's a life saver

html[lang^='fa'],
html[lang^='ar'],
html[lang^='he'] {
  direction: rtl;
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to dynamically set dir attribute based on locale in NextJS 10? #19049

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 15 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to dynamically set dir attribute based on locale in NextJS 10? #19049

Replies: 7 comments · 15 replies

Replies: 7 comments 15 replies