Estoy tratando de agregar un fragmento de código html a mi proyecto nextjs. El fragmento de código contiene un script externo que tiene una función createButton.

 <div id="examplebtn"></div> <script type="text/javascript"> //<![CDATA[ document.addEventListener('DOMContentLoaded', function () { createButton('Name', 'Phone'); }); //]]> </script> <script src="https://example.com.na/js/example.js"></script>

La función createButton muestra un botón identificado por el id (examplebtn en este caso) y en un documento html nativo funciona bien. Sin embargo, en nextjs no puedo agregar un detector de eventos al evento DOMContentLoaded como se muestra en el script, para que ejecute la función una vez que se haya cargado el DOM. Intenté usar Next/Script, useEffect hooks, etiquetas html nativas, todo fue en vano. ¿Cómo puedo agregar el detector de eventos DOMContentLoaded al componente jsx antes de que el documento esté completamente cargado para que la función pueda ejecutarse en el momento adecuado? Gracias de antemano por su amable ayuda.

{EDITAR} Estoy agregando el código final de createButton para mayor claridad. Ha sido editado porque no puedo publicar el código debido a obligaciones contractuales, sin embargo, debería resultar útil.

 window .ButtonComponent({ params, onPay: function (v, vn, a, r, e) { c = customFunct(moreParams); PopupComponent({ params, onCancel: function () { console.log('called onCancel'); // stuff here }, onSubmit: function (r) { // stuff here }, }).render('body'); }, }) .render('#examplebtn');