打字机效果 Next.js

如何解决打字机效果 Next.js

文档未定义

文档未定义 文档未定义 文档未定义 文档未定义 文档未定义 块引用

我可以使用 next.js 来做到这一点吗？

因为今天在“document.getElementById () ...”中出现错误，我相信这是因为 SSR。

今天的代码是这样的。

import styles from '../../../../styles/modules/SobreNos/TextoSobreNos/TextoSobreNos.module.scss'

export default function TextoSobreNos() {

var div = document.getElementById('titleText');
var textos = ['Hoje está um lindo dia!','Ontem também... lindo lindo!','Amanha ouvi dizer que vai chover... vamos ver...','Boa noite,até amanhã.','Bons sonhos...zzZZZzzzz......'];

function escrever(str,done) {
    var char = str.split('').reverse();
    var typer = setInterval(function () {
        if (!char.length) {
            clearInterval(typer);
            return setTimeout(done,500); // só para esperar um bocadinho
        }
        var next = char.pop();
        div.innerHTML += next;
    },100);
}

function limpar(done) {
    var char = div.innerHTML;
    var nr = char.length;
    var typer = setInterval(function () {
        if (nr-- == 0) {
            clearInterval(typer);
            return done();
        }
        div.innerHTML = char.slice(0,nr);
    },100);
}

function rodape(conteudos,el) {
    var atual = -1;
    function prox(cb) {
        if (atual < conteudos.length - 1) atuaL++;
        else atual = 0;
        var str = conteudos[atual];
        escrever(str,function () {
            limpar(prox);
        });
    }
    prox(prox);
}
rodape(textos);

return (
    <section className={styles.textoSobreNosWrapper}>
        <div className={styles.leftWrapper}>
            <div>
                <p id="titleText"></p>
            </div>
        </div>
 
    </section>
);

}

谢谢