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

В Next.js, как и в React в целом, для добавления класса к элементу нужно воспользоваться условным оператором JSX или же использовать переменные или вычисляемые свойства. Вот несколько способов добавить класс к элементу в Next.js:

1. **Используя условный оператор JSX:**

function MyComponent() {
  const isSpecial = true;

  return (
    <div className={isSpecial ? 'special-class' : ''}>
      {/* Содержимое компонента */}
    </div>
  );
}

2. **Используя переменные:**

function MyComponent() {
  const customClass = 'custom-class';

  return (
    <div className={customClass}>
      {/* Содержимое компонента */}
    </div>
  );
}

3. **Используя вычисляемые свойства:**

function MyComponent() {
  const additionalClass = 'additional-class';

  const classes = `default-class ${additionalClass}`;

  return (
    <div className={classes}>
      {/* Содержимое компонента */}
    </div>
  );
}

4. **Используя массив классов:**

function MyComponent() {
  const additionalClass = 'additional-class';

  const classes = ['default-class', additionalClass].join(' ');

  return (
    <div className={classes}>
      {/* Содержимое компонента */}
    </div>
  );
}

Используя любой из этих подходов, вы сможете добавить класс к элементу в Next.js таким образом, что это соответствует лучшим практикам React разработки. Не забывайте, что классы в React и Next.js применяются через атрибут className, а не class, как в обычном HTML.