How To Implement Multiple Classnames In NextJS ?

When styling components in Next.js, it's common to encounter scenarios where you need to apply multiple classnames for different styling purposes. To implement multiple classnames in Next.js, you can utilize either the built-in classnames package or any other utility library like clsx.

We will discuss the different approaches to Implementing Multiple Classnames in NextJS:

Step to Create a NextJS App

Step 1: First, create a new NextJS project by running the following command in your terminal:

npx create-next-app <project-name>

Step 2: Navigate into the project directory:

cd <project-name>

Project Structure:

The Updated dependencies in your package.json file is.

"dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },

Using String Interpolation or Concatenation

Initially, beginners often follow this approach. However, they quickly encounter challenges with maintenance and readability, particularly when working with TailwindCSS for styling, which exacerbates the issue.

Update Page.js and make Home.module.css and button.module.css in styles folder for adding css.

Example: Below is an example to implementing Multiple Classnames In NextJS Using String Interpolation or Concatenation.

/* styles/button.module.css */

.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.active {
    background-color: #28a745;
}

/* styles/button.module.css */

.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.active {
    background-color: #28a745;
}

// page.js

import styles from './styles/Home.module.css';
import buttonStyles from './styles/button.module.css';

export default function Home() {
    const isActive = true;

    // Define multiple classNames using string interpolation or concatenation
    const buttonClass = `${buttonStyles.button} ${isActive ? buttonStyles.active : ''}`;

    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <h1 className={styles.title}>
                    Welcome to
                    <a href="https://www.geeksforgeeks.org/">Geeksforgeeks!</a>
                </h1>

                <button className={buttonClass}>Click Me</button>
            </main>
        </div>
    );
}

Output:

Using Utility Packages (`classnames` or `clsx`)

Presently, two utility packages address the aforementioned issue: classnames and clsx. Functionally, they are identical, with clsx being slightly smaller than classnames. Both packages weigh in at less than 500 bytes, rendering the choice inconsequential. It's merely a matter of preference to determine which package name exudes more appeal.

Install the required packages using the below command.

npm install classnames
or
npm install clsx

The Updated dependencies in your package.json file is.

"dependencies": {
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
},

In case of - Using `classnames`

Example: Below is an example to implementing Multiple Classnames In NextJS Using 'classnames'.

/* styles/button.module.css */

.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.active {
    background-color: #28a745;
}

// page.js

import React from "react";
import styles from "./styles/button.module.css"; // Import CSS module

export default function Home() {
  const isActive = true;

  // Define classNames using classnames package
  const buttonClass = isActive ? `${styles.button} ${styles.active}` : styles.button;

  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <button className={buttonClass}>Click Me</button>
    </div>
  );
}

In case of - Using `clsx`

Example: Below is an example to implementing Multiple Classnames In NextJS Using 'clsx'.

/* styles/button.module.css */

.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.active {
    background-color: #28a745;
}

// page.js

import React from "react";
// Import clsx
import clsx from "clsx";
import styles from "./styles/button.module.css";

export default function Home() {
    const isActive = true;

    // Define classNames using clsx
    const buttonClass = clsx(styles.button, {
        [styles.active]: isActive
    });

    return (
        <div>
            <h1>Welcome to Next.js!</h1>
            <button className={buttonClass}>Click Me</button>
        </div>
    );
}

Output:

Conclusion

With these approaches, you can easily manage multiple classnames in your Next.js components, making styling more flexible and efficient. Whether you choose string interpolation or utility packages, these methods provide convenient solutions for styling your Next.js applications.

prahladgaur0711

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Next.js