Как в next js добавить CSS-класс к элементу?

Чтобы добавить CSS-класс к элементу в Next.js, вы можете воспользоваться стандартным способом добавления CSS-классов в React. Например, вы можете добавить класс напрямую к элементу или использовать условные операторы для добавления класса при определенных условиях.

Пример добавления CSS-класса напрямую к элементу в Next.js:

```jsx
const MyComponent = () => {
  return (
    <div className="my-class">Hello, World!</div>
  );
};
```

Пример использования условных операторов для добавления CSS-класса в зависимости от определенного условия:

```jsx
const MyComponent = ({ isActive }) => {
  return (
    <div className={isActive ? 'active-class' : 'inactive-class'}>Hello, World!</div>
  );
};
```

Если вы хотите модифицировать компонент навбара с иконками для активации ссылок, вы можете добавить состояние для отслеживания активной ссылки и изменять соответствующий CSS-класс в зависимости от этого состояния.

Пример модификации компонента навбара с иконками в Next.js для активации ссылок:

```jsx
import { useState } from 'react';
import Link from 'next/link';

const Navbar = () => {
  const [activeLink, setActiveLink] = useState(null);

  return (
    <nav>
      <ul>
        <li className={activeLink === 'home' ? 'active' : ''}>
          <Link href="/">
            <a onClick={() => setActiveLink('home')}>Home</a>
          </Link>
        </li>
        <li className={activeLink === 'about' ? 'active' : ''}>
          <Link href="/about">
            <a onClick={() => setActiveLink('about')}>About</a>
          </Link>
        </li>
        <li className={activeLink === 'contact' ? 'active' : ''}>
          <Link href="/contact">
            <a onClick={() => setActiveLink('contact')}>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;
```

В данном примере при клике на ссылку активируется соответствующий CSS-класс для выделения активной ссылки. Вы можете изменить стили компонента навбара и задать класс `.active` для выделения активной ссылки в вашем CSS файле.

Примерно так: 
 
{navLinks.map((link) => (
    <Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} />
))}

...
import classNames, { type Argument } from "classnames";

type Props = {
    title: string;
    href: string;
    className: Argument;
}

<Link href={props.href} className={classNames('svgh m-auto', props.className)>
    <SvgMail width="30" height="30" viewBox="0 0 50 50" />
</Link>
 https://www.npmjs.com/package/classnames

Как в обычном реакте: 
 
const Icon = ({title, href, active}) => {
    const className = active ? 'active' : '';

    return (
        <Link href={href} className={`svgh m-auto ${className}`}>
            {/* svg */}
        </Link>
    );
}
 
 
'use client'
import React, {useState, useEffect} from 'react';
import Icon from './icons/Icon';

const links = [
    {href: '#home_anchor', svgIcon: 'home'},
    {href: '#user_anchor', svgIcon: 'user'}
    // others
];

const Navbar = () => {
    const [activeLink, setActiveLink] = useState('');

    useEffect(() => {
        const handleScroll = () => {
            // logic scroll
        }

        // add anchor
        window.addEventListener('scroll', handleScroll);

        // remove anchor from unmount
        return () => window.removeEventListener('scroll', handleScroll)

    }, []);

    return (
        <nav className="flex flex-col fixed bg-gray-800 align-center">
            {links.map((l) => (
                <Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>
            ))}
        </nav>
    );
}