Add custom attributes to the <body> tag #12325

mimshins · 2020-04-29T20:42:02Z

mimshins
Apr 29, 2020

How can I (for example) add a custom className to body dynamically.
...or change the “dir” attribute value.

c0b41 · 2020-04-29T22:23:24Z

c0b41
Apr 29, 2020

1 reply

arsnl Mar 15, 2021

As the question mentioned to "add a custom className to tag dynamically", I don't think the _document is the good place for that. Given that _document is not hydrated client-side, _app or any lower page/component's are more adequate for dynamic values.

See my answer bellow: #12325 (comment)

ParallelUniv3rse · 2020-05-06T09:22:38Z

ParallelUniv3rse
May 6, 2020

Any hints on how to do what the op asked? I'm having the same problem and simply modifying the _document.js will not work to change the attributes per page(route), since

Document is only rendered in the server, event handlers like onClick won't work

As mentioned in the caveats.

0 replies

gdenisov · 2020-06-12T00:55:47Z

gdenisov
Jun 12, 2020

I have the same question. react-helmet has 'bodyAttributes' and 'htmlAttributes' that are very useful for getting the right attributes in place per route in SSR. Is there a way to tap into this with the next/head?

0 replies

srikanth912 · 2020-06-12T01:45:49Z

srikanth912
Jun 12, 2020

How about using withRouter and then extracting the current route/path to do the comparison and inject properties based on the current router/path?

const { router: { pathname, query, asPath } = this.props ?

0 replies

gdenisov · 2020-06-12T02:09:25Z

gdenisov
Jun 12, 2020

@srikanth912 That's a good trick! The downside to this is that the logic is now in multiple places — while the rest of the page meta info is in the component.

0 replies

ghost · 2020-07-07T18:37:40Z

ghost
Jul 7, 2020

This seems like a missing feature, no? It seems like refactoring from react-helmet should be relatively straightforward 🤔.

0 replies

maickoldxd · 2021-02-20T03:37:12Z

maickoldxd
Feb 20, 2021

if you use something like a wrapper, you can use componentDidMount

`class Container extends React.Component{

componentDidMount() {
    const body = document.getElementsByTagName('body')[0];
    //do some stuff...
}
render(){
    {this.props.children}
 }

}`

0 replies

muuvmuuv · 2021-03-01T15:02:07Z

muuvmuuv
Mar 1, 2021

Can you make this an issue not a discussion? It really IS a missing feature. I will continue using react-helmet-async instead because I am setting classes on body to hide certain elements on the page based on the route.

0 replies

arsnl · 2021-03-15T16:29:03Z

arsnl
Mar 15, 2021

4 replies

tadeolinco May 7, 2021

@arshad does this approach create this warning https://nextjs.org/docs/messages/next-head-count-missing if we put a body tag inside Head?

jpedroschmitz Jun 16, 2021

At least for me, this doesn't work. It messes up the entire HTML and adds all meta tags inside the body and not on the head.

vidhanio Nov 16, 2021

Thank you, this worked like a charm for me! 😄

dpbeaumont Dec 29, 2021

@arshad does this approach create this warning https://nextjs.org/docs/messages/next-head-count-missing if we put a body tag inside Head?

It did for me!

smnh · 2021-08-01T18:01:22Z

smnh
Aug 1, 2021

@mimshins

For best results, use both _document.js and _app.js to ensure that your server side rendered pages have the correct body class (or any other attribute on body or html) and that these classes updated correctly when user navigates between pages.

// src/pages/_document.js

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

export default class MyDocument extends Document {
    render() {
        const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
        return (
            <Html>
                <Head />
                <body className={ pageProps.isDark ? 'dark-mode' : 'light-mode' }>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

// src/pages/_app.js

import React, { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
    useEffect(() => {
        document.body.className = pageProps.isDark ? 'dark-mode' : 'light-mode';
    });
    return <Component {...pageProps} />
}

// src/pages/index.js

export async function getStaticProps() {
    return { props: { isDark: true } };
}

export default function IndexPage(props) {
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    );
}

Here is the post with full explanation.

4 replies

wdcs-urmilpatel Jul 5, 2022

great work

mimshins Jul 5, 2022
Author

Great workaround ^^

whale2002 Nov 25, 2022

thanks

ZB333ZB Dec 30, 2022

That's great. I wonder how can I use it with redux. I want to put "overflow-hidden" (Tailwind) on the body tag when a burger button is enabled. I reach the burger state via useSelector. It is true or false. I pass the value into the props as String (I get error if I don't)

//index.js

let isBurgerEnabled;

export default function Home() {
  isBurgerEnabled = useSelector(burgerState);
   /* ************************************* */
}

export async function getStaticProps() {
  return { props: { isOverflowHidden: String(isBurgerEnabled) } };
}

//_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
    return (
      <Html>
        <Head />
        <body
          className={`${
            pageProps.isOverflowHidden ? "overflow-hidden" : "overflow-auto"
          }`}
        >
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

//_app.js
import React, { useEffect } from "react";
import { Provider } from "react-redux";
import { store } from "/src/redux/store";
import "/src/shared/styles/tailwind.css";

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    document.body.className = pageProps.isOverflowHidden
      ? "overflow-hidden"
      : "overflow-auto";
  });

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

But I get false everytime. If I hardcode false or true it works fine

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add custom attributes to the <body> tag #12325

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 10 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Add custom attributes to the <body> tag #12325

Replies: 10 comments · 9 replies

mimshins Jul 5, 2022 Author

Replies: 10 comments 9 replies

mimshins Jul 5, 2022
Author