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

Multi selection dropdown feature in Angular failing to populate the options

Switch between multiple unordered lists (ul) so that when one list is clicked, the other lists reset to their initial state as though they were never

Extracting timestamped text data from a simulated chat interface

Ways to update state based on changes in localStorage values

How to transfer identification from one AngularJS page to another

Error message thrown by Angular JS: [$injector:modulerr] – error was not caught

Guide to connecting to various controllers in Angular

An error occurred during runtime due to a TypeError when trying to execute the 'setItem' function on 'Storage'. The error message indicates that 2 arguments are required for this function, but only 1 argument

Getting the inner element of a particular child from the parent div using selenium with javascript

Using jQuery's .remove() function removes all of the children from the container, rather than just one at

Despite working smoothly with an HTML form tag, the "req.file" multer is undefined when it comes to HTTP requests from a script

Monitor a nested watch property for potential undefined or default values

Angular: Discovering and retrieving all images within a div container

An Ajax call nested within another Ajax call

Tips on enclosing <li> elements within <ul> tags

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

Achieve resumable uploads effortlessly with google-cloud-node

What steps can be taken to enhance the functionality of this?

Analyzing the browser's address bar and creating a navigation link derived from it

Sharing data from AJAX calls in Vue using vue-resource