Next.js custom class on body using _document.js

Question

I'm using the example here

https://github.com/zeit/next.js#custom-document

and I want to change the custom_class on the body tag

I have tried passing props on calling components but nothing works. I want to add a 'dark' class based on some condition but I have no idea how to change this.

EDIT:

I'm not sure this is possible. After getting help from the nextjs slack channel I was told

"Pages get rendered client side with next/link
And body is not touched after server side rendering"

I'm going to try and wrap things in another tag that I generate and try and change that.

I'm upvoting, did you check the example? I only use <style jsx [global> tags — trinaldi
– trinaldi, Commented Apr 2, 2018 at 10:50
"I'm going to try and wrap things in another tag that I generate and try and change that." That may well be the best solution. Because of the way client-side routing and rendering works, most frameworks mount the app inside some existing element. The app is then able to influence everything inside that element, nut not the element itself or any of it's parents. — Stijn de Witt
– Stijn de Witt, Commented Sep 11, 2021 at 11:13

Jacquen · Accepted Answer · 2019-02-19 20:28:26Z

19

The cleanest solution I found is not declarative, but it works well:

import Head from "next/head"

class HeadElement extends React.Component {
    componentDidMount() {
        const {bodyClass} = this.props
        document.querySelector("body").classList.add(bodyClass || "light")
    }

    render() {
        return <Head>
            {/* Whatever other stuff you're using in Head */}
        </Head>
    }
}

export default HeadElement

With this Head component you would pass in "dark" or "light" (following the question's example for light/dark themes) as the bodyClass prop from the page.

answered Feb 19, 2019 at 20:28

Jacquen

1,26613 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miquel Canal Over a year ago

This answer is correct. I'd just add that the question says "based on some condition". So if that condition is dynamic and the head element gets mounted and unmounted multiple times, the "light" class will keep adding on top of the <body> element. In my case, I had to remove first any reference to an old class using document.querySelector("html")?.classList.remove("my-class")

Luca Reghellin · Accepted Answer · 2021-01-05 18:24:19Z

19

As of current Next (10) and React (17) versions, If you'd like to change the body class from a page, you can can do it like this:

// only example: maybe you'll want some logic before, 
// and maybe pass a variable to classList.add()
useEffect( () => { document.querySelector("body").classList.add("home") } );

Please note that useEffect is a Hook, so it can be used only in modern function components, not class ones.

The useEffect Hook can be used instead of the 'old' componentDidMount LifeCycle.

https://reactjs.org/docs/hooks-effect.html https://reactjs.org/docs/hooks-overview.html https://reactjs.org/docs/components-and-props.html

answered Jan 5, 2021 at 18:24

Luca Reghellin

8,19515 gold badges84 silver badges133 bronze badges

3 Comments

Stijn de Witt Over a year ago

Also, document is not available on Node is it? So this presumably does not work well with server-side rendering.

Will Schoenberger Over a year ago

This answer is pretty decent. You could even make a custom hook out of it. Pretty sure the useEffect hook doesn't run on the server, so this should not cause issues accessing document while running server-side.

Roman Over a year ago

you need to add [] at the end of the useEffect dependencies to call it only once, otherwise it will be called on every page re-render

Joel · Accepted Answer · 2021-07-29 09:50:08Z

3

The only way to directly access the body tag on Next js is via the _document.js file but this file is rendered server side as stated in the Documentation.

The work around I suggest is to access the body tag from the component directly. Example:

const handleClick = (e) => {
    document.querySelector('body').classList.toggle('dark')
}

<div onClick={handleClick}>Toggle</div>

answered Jul 29, 2021 at 9:50

Joel

1251 silver badge4 bronze badges

Comments

smnh · Accepted Answer · 2021-08-01 16:57:26Z

3

Unfortunately, next/head does not allow specifying body class like React Helmet does:

<Helmet>
  <body className="foo"/>
</Helmet>

Luckily, you can use this.props.__NEXT_DATA__.props.pageProps inside _document.js to get access to the page props and use them to to set the class on the <body> element:

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

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

    render() {
        const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
        console.log('pageProps => ', pageProps);
        return (
            <Html>
                <Head />
                <body className={pageProps.bodyClassName}>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

More info here.

edited Aug 1, 2021 at 16:57

answered Feb 24, 2021 at 20:35

smnh

1,74510 silver badges15 bronze badges

3 Comments

Cody Ng Over a year ago

I like your line: const pageProps = _.get(this.props, 'NEXT_DATA.props.pageProps');

curly_brackets Over a year ago

Why was this downvoted? Looking in the docs, this seems to be the correct way? nextjs.org/docs/advanced-features/custom-document

adardesign Over a year ago

in the docs it now says: For React 18 support, we recommend avoiding customizing getInitialProps and renderPage, if possible.

Rob Mathieu · Accepted Answer · 2020-12-11 18:55:46Z

The solution I came up with for my situation where I don't need a lot of unique body classes was to create a component called BodyClass.js and import that component into my Layout.js component.

BodyClass.js

import  { Component } from 'react';

class BodyClass extends Component {

    componentDidMount() {

        if (window.location.pathname == '/') {
            this.setBodyClass('home');
            
        } else if (window.location.pathname == '/locations') {
            this.setBodyClass('locations');
        } 
    }

    setBodyClass(className) {
        // remove other classes
        document.body.className ='';

        // assign new class
        document.body.classList.add(className);
    }

    render() { 
        return null;
    }

}
 
export default BodyClass;

Layout.js

import Header from './Header';
import Footer from './Footer';
import BodyClass from '../BodyClass';

const Layout = ({ children }) => {

    return (

        <React.Fragment>

            <BodyClass />

            <Header />

            {children}
            
            <Footer />

        </React.Fragment>

    )

}


export default Layout;

Joshua Tuscan · Accepted Answer · 2018-07-25 19:01:24Z

0

It's not exactly the answer you are looking for, but I was able to accomplish the same thing functionally by passing a prop through the component which then updates a class on a top-level element that wraps everything in my app and sits just under the . This way each page can have it's own unique class and operates the same way I'd use a body class.

Here is where I pass the prop through

<Layout page_title={meta_title} page_desc={meta_desc} main_class={'contact_page'}>

And here is where I use it in the Layout component:

<main className={props.main_class}>
    <Header page_title={props.page_title} page_desc={props.page_desc} />

      {props.children}

    <Footer />
</main>

answered Jul 25, 2018 at 19:01

Joshua Tuscan

3734 silver badges13 bronze badges

Comments

AinahToky Andry · Accepted Answer · 2022-01-03 15:44:27Z

0

Directly, it's not possible. But with another way, you can use framework like tailwind and insert the class directly in your css.
Here an example using tailwind:

.dark {
  background-color: black;
  color: white;
}

body {
  @apply dark
}

answered Jan 3, 2022 at 15:44

AinahToky Andry

394 bronze badges

1 Comment

Alan Sikora Over a year ago

This solution is very nice!

tordans · Accepted Answer · 2022-12-23 09:02:56Z

0

This is my CSS only solution:

(I first looked at https://stackoverflow.com/a/66358460/729221 but that felt too complex for changing a bit of styling.)

(This uses Tailwind CSS, but does not need to.)

index.css:

body:has(#__next .set-bg-indigo-50-on-body) {
      @apply bg-indigo-50;
}

layout.tsx:

  //…
  return (
    <div className="set-bg-indigo-50-on-body">{children}</div>
  )

This will work, as long as that div is a direct parent of <div id="__next">. Otherwise you need to update the css :has-rule.

answered Dec 23, 2022 at 9:02

tordans

437 bronze badges

Comments

Swayok · Accepted Answer · 2024-05-29 13:03:21Z

I haven't found a good way to do this in next.js 14, so the best way seems to be using a custom hook like this:

import {DependencyList, useEffect} from 'react'

export default function useBodyClassName(className: string, deps: DependencyList = []): void {
    useEffect(() => {
        document.body.classList.add(className)

        return () => {
            document.body.classList.remove(className)
        }
    }, deps)
}

It will handle adding and removal of provided class name to <body> when dependencies change. With empty dependencies list it will add class name on component mount and remove it on component unmount.

It won't affect existing class names of <body>, so you can use this hook in several components to add several different class names. Just make sure class names are different.

Collectives™ on Stack Overflow

Next.js custom class on body using _document.js

9 Answers 9

1 Comment

3 Comments

Comments

3 Comments

BodyClass.js

Layout.js

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

3 Comments

Comments

3 Comments

BodyClass.js

Layout.js

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related