Adding classes to the body of a NextJS application

If you want to add a class (className) to the body tag of a a NextJS page, you'll need to add it via JavaScript in the useEffect (or componentDidMount if you're using class-based components) Lifecycle function.

This adds TailWindCSS's font-light and text-gray-700 classes to the body tag.

import { useEffect } from 'react';
import type { NextPage } from 'next';

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

const Layout: NextPage = ({children}) =>
    useEffect(() =>

    return (
            <Header />
            <header className="bg-white"> 
                <Nav />
        <Footer />

export default Layout