Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

Question

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

I am looking to apply my custom class to certain pages, with the exception of specific routes. For example, all pages should have the class fixed-header, except for the following routes:

/cart/step-1

/login

This class should be added or removed from the body element.

<body className="bg-gray fixed-header"

However, I am unsure how to implement this scenario. Any suggestions?

javascript next.js

Answer 1

Answer №1

Start by creating your own custom _document.js and _app.js files within the pages directory.

Here's a handy utility function to check for classes on the body element (to prevent duplicate classes, inspired by @juliomalves):

// ./utils/hasClasses
const hasClasses = () =>
  document.body.classList.contains("bg-gray") &&
  document.body.classList.contains("fixed-header");
export default hasClasses;

Implementing Server-Side Rendering

In the _document.js file, utilize the __NEXT_DATA__ prop to access the current page, verify if the page is in your approved routes, and add appropriate classes to the body element.

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

class MyDocument extends Document {

  // Add more routes here if you wish to apply the same classes  
  allowedRoutes = ["/login", "/cart/step-1"];

  getColor() {
    const { page } = this.props?.__NEXT_DATA__;
    if (this.allowedRoutes.includes(page))
      return "bg-gray fixed-header";
    return "";
  }

  render() {
    return (
      <Html>
        <Head />
        <body className={this.getColor()}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This code will execute exclusively on the server side. The classes won't be added to the body during client-side navigation.

Client-Side Rendering Solution

To address the aforementioned issue, apply the same logic found in _app.js within a useEffect hook, ensuring that the appropriate class is added during client-side rendering.

import { useEffect } from "react";
import { useRouter } from "next/router";
import "../styles.css";
import hasClasses from "./utils/hasClasses";

function MyApp({ Component, pageProps }) {

  const { pathname: page } = useRouter();
  const allowedRoutes = ["/login", "/cart/step-1"];

  useEffect(() => {
    if (!hasClasses() && allowedRoutes.includes(page))
      document.body.className += "bg-gray fixed-header";
    else if (hasClasses()) {
      // Eliminate styles on other pages to prevent conflicts.
      // Determine how to handle this based on your needs.
      document.body.classList.remove("bg-gray");
      document.body.classList.remove("fixed-header");
    }
  });
  return <Component {...pageProps} />;
}

export default MyApp;

This approach ensures proper application of classes during client-side navigation on permitted routes. The code within _document.js guarantees that pages rendered on the server are transmitted with correct styling to prevent any visual glitches on the client side.

Answer 2

Start by creating your own custom _document.js and _app.js files within the pages directory.

Here's a handy utility function to check for classes on the body element (to prevent duplicate classes, inspired by @juliomalves):

// ./utils/hasClasses
const hasClasses = () =>
  document.body.classList.contains("bg-gray") &&
  document.body.classList.contains("fixed-header");
export default hasClasses;

Implementing Server-Side Rendering

In the _document.js file, utilize the __NEXT_DATA__ prop to access the current page, verify if the page is in your approved routes, and add appropriate classes to the body element.

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

class MyDocument extends Document {

  // Add more routes here if you wish to apply the same classes  
  allowedRoutes = ["/login", "/cart/step-1"];

  getColor() {
    const { page } = this.props?.__NEXT_DATA__;
    if (this.allowedRoutes.includes(page))
      return "bg-gray fixed-header";
    return "";
  }

  render() {
    return (
      <Html>
        <Head />
        <body className={this.getColor()}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This code will execute exclusively on the server side. The classes won't be added to the body during client-side navigation.

Client-Side Rendering Solution

To address the aforementioned issue, apply the same logic found in _app.js within a useEffect hook, ensuring that the appropriate class is added during client-side rendering.

import { useEffect } from "react";
import { useRouter } from "next/router";
import "../styles.css";
import hasClasses from "./utils/hasClasses";

function MyApp({ Component, pageProps }) {

  const { pathname: page } = useRouter();
  const allowedRoutes = ["/login", "/cart/step-1"];

  useEffect(() => {
    if (!hasClasses() && allowedRoutes.includes(page))
      document.body.className += "bg-gray fixed-header";
    else if (hasClasses()) {
      // Eliminate styles on other pages to prevent conflicts.
      // Determine how to handle this based on your needs.
      document.body.classList.remove("bg-gray");
      document.body.classList.remove("fixed-header");
    }
  });
  return <Component {...pageProps} />;
}

export default MyApp;

This approach ensures proper application of classes during client-side navigation on permitted routes. The code within _document.js guarantees that pages rendered on the server are transmitted with correct styling to prevent any visual glitches on the client side.

Answer 3

Answer №2

If you're looking for a simple and efficient solution, this one's for you. Just insert the following code snippet into every component where you need to apply unique classes to the <body> element.

useEffect( () => { document.querySelector("body").classList.add("bg-gray fixed-header") } );

Answer 4

If you're looking for a simple and efficient solution, this one's for you. Just insert the following code snippet into every component where you need to apply unique classes to the <body> element.

useEffect( () => { document.querySelector("body").classList.add("bg-gray fixed-header") } );

Adding a custom class to the body element for specific routes in Next.js can be achieved by utilizing the features of

Answer №1

Implementing Server-Side Rendering

Client-Side Rendering Solution

Answer №2

Similar questions

Accessing an array outside of an Ajax call that was initiated within a success callback

Flot seems to be having difficulty uploading JSON files

show image with the help of jquery and ajax

Altering CSS styles through JavaScript or jQuery

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Interpret a JavaScript array response

What steps should be taken to fix the sinopia installation error?

Error: Unable to load the parser '@typescript-eslint/parser' as specified in the configuration file '.eslintrc.json' for eslint-config-next/core-web-vitals

How to modify a specific property of an array object in JavaScript

Initiate a jQuery modal dialogue box

What purpose does the class serve in typescript?

Error message: "SyntaxError: Unexpected token import was not caught by the foundation"

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

Prevent a specific folder from being included in expressjs routing

React error: Objects cannot be used as children in React components

Creating a web form with HTML and integrating it with jQuery AJAX

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Switch the URL to the default page in next.js

Prop in a React component is undergoing mutation

What is the best way to consistently and frequently invoke a REST API in Angular 8 using RxJS?