Is it possible to include extra attributes from the server in AOS + NEXTJS 13, specifically the "class" attribute?

Как изменить компонент AnimationWrapper.tsx, чтобы избежать ошибки "Extra attributes from the server: class" при его использовании в Next.js 13(app)?
  • 28 декабря 2023 г. 21:37
Ответы на вопрос 1
Да, в Next.js 13 и AOS вы можете добавить дополнительные атрибуты с сервера, включая атрибут "class".

Чтобы избежать ошибки "Extra attributes from the server: class" при использовании компонента AnimationWrapper в Next.js 13, вы можете внести следующие изменения в файл AnimationWrapper.tsx:

1. Найдите и импортируйте компонент "React" из пакета react:

```tsx
import React from 'react';
```

2. В декларации компонента AnimationWrapper.tsx укажите типы пропсов с помощью интерфейса:

```tsx
interface AnimationWrapperProps {
  class?: string;
  // другие пропсы компонента
}
```

3. Передайте атрибут "class" в компонент div следующим образом:

```tsx
const AnimationWrapper: React.FC<AnimationWrapperProps> = ({ children, class }) => {
  return (
    <div className={class} data-aos="fade-up">
      {children}
    </div>
  );
};

export default AnimationWrapper;
```

Теперь вы можете использовать компонент AnimationWrapper с атрибутом "class" в вашем приложении Next.js 13 без ошибок.
Похожие вопросы