_document.js not working properly in Nextjs

I am working with "Reactjs" (Nextjs),I am including "class to body tag" conditionally,For this i created file name "BodyClass.js" then put condition and import this file in "_document.js", But problem is whenever Firsttime i click on "about" page(via menu bar) then "class on body" not including,But if i refresh page then everything become fine, In other words "class not including" on firsttime click on "about menu", Where i am wrong ? Here is my BodyClass.js file

import  { Component } from 'react';
import { finished } from 'stream';
class BodyClass extends Component {
    componentDidMount() {
        if (window.location.pathname == '/') {
            this.setBodyClass('main-layout');
       } else if (window.location.pathname == '/about'{
            this.setBodyClass('inner_page');
        } 
    }
    setBodyClass(className) {
        document.body.className ='';
        document.body.classList.add(className);
    }
    render() { 
        return null;
    }
}
export default BodyClass;

Here is my "Layout.js" which i import in "_app.js" file

import React from 'react'
import HomeHeader from './HomeHeader'
import Footer from './Footer'
import BodyClass from './BodyClass'
export default function Layout({ children }) {
  return (
    <>
    <BodyClass />
      <HomeHeader />
      <main>{children}</main>
      <Footer />
    </>
  )
}