我正在尝试添加一个html代码片段到我的nextjs项目。该代码段包含一个带有按钮函数的外部脚本。

<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>

这个函数呈现一个由id标识的按钮（在这个例子中是examplebtn），在原生html文档中它可以正常工作。然而，在nextjs中，我无法像脚本中所示的那样向DOMContentLoaded事件添加事件侦听器，以便在DOM加载后运行函数。我试过使用Next/Script，useEffect hooks，native html tags都没有用。如何在文档完全加载之前将DOMContentLoaded事件侦听器添加到jsx组件，以便函数可以在适当的时间运行？提前感谢您的帮助。
{编辑}为了更清晰，我添加了最后一段代码。由于合同义务，我不能发布代码，所以它被编辑过，但它应该是有帮助的。

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');