Estou tentando integrar a biblioteca ScrollReveal em meu aplicativo Next.js. Estou encontrando um erro quando uso ScrollReveal dentro de um useEffectgancho. A mensagem de erro é:
ReferenceError: o documento não está definido
Entendo que esse erro geralmente ocorre ao tentar acessar o DOM em um ambiente sem navegador, mas não tenho certeza de como resolver esse problema especificamente em um aplicativo Next.js.
Aqui está a aparência da parte relevante do meu código:
import { useEffect } from 'react';
import ScrollReveal from 'scrollreveal';
function MyComponent() {
useEffect(() => {
const sr = ScrollReveal();
sr.reveal('.my-element', {
// ... options
});
}, []);
return (
<div className="my-element">
{/* ... component content */}
</div>
);
}
export default MyComponent;
Já tentei usar useLayoutEffect em vez de useEffect, mas o problema persiste. Também vi sugestões para verificar condicionalmente a janela antes de usar ScrollReveal, mas isso também não funcionou.
Alguém poderia me orientar sobre como integrar corretamente o ScrollReveal em um aplicativo Next.js para evitar esse erro? Eu apreciaria muito quaisquer insights ou soluções para resolver este problema.
Agradeço antecipadamente por sua ajuda!