Как в 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 файле.

Примерно так: <br/> <pre><code class="javascript">{navLinks.map((link) =&gt; (
    &lt;Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} /&gt;
))}

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

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

&lt;Link href={props.href} className={classNames('svgh m-auto', props.className)&gt;
    &lt;SvgMail width="30" height="30" viewBox="0 0 50 50" /&gt;
&lt;/Link&gt;</code></pre> <a href="https://www.npmjs.com/package/classnames" rel="nofollow">https://www.npmjs.com/package/classnames</a>

Как в обычном реакте: <br/> <pre><code class="javascript">const Icon = ({title, href, active}) =&gt; {
    const className = active ? 'active' : '';

    return (
        &lt;Link href={href} className={`svgh m-auto ${className}`}&gt;
            {/* svg */}
        &lt;/Link&gt;
    );
}</code></pre> <br/> <pre><code class="javascript">'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 = () =&gt; {
    const [activeLink, setActiveLink] = useState('');

    useEffect(() =&gt; {
        const handleScroll = () =&gt; {
            // logic scroll
        }

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

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

    }, []);

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