Next.js Vanilla JS 脚本不会在部署时运行

Question

我正在使用 Next.js 构建一个简单的 static 站点。 我拥有的唯一香草 JS 脚本是用于移动菜单 - 将其打开并将 class 添加到正文以防止滚动：

if (process.browser) {
  document.addEventListener('DOMContentLoaded', function() {

    let mainNav = document.querySelector('#menu')
    let navBarToggle = document.querySelector('#toggle')
    let noScroll = document.querySelector('body')

    navBarToggle.addEventListener('click', function () { 
      mainNav.classList.toggle('active')
      navBarToggle.classList.toggle('close')
      noScroll.classList.toggle('lock-scroll')
    })
  })
}

if process.browser语句是我必须添加的，以使其在 localhost 上工作，该语句有效，但仅在第一次加载时有效，例如，当我第一次运行下一个开发时。 在我导航到另一个页面后它不会加载，我猜是因为页面没有被完全重新渲染，脚本需要哪个或什么？

然后，当我部署站点时，切换根本不起作用，即使是在第一次加载时也是如此。

无论如何，非常感谢您对这项工作的任何帮助！

Answer 1

process.browser已被弃用，使用type of window

if (typeof window !== "undefined") {
  document.addEventListener('DOMContentLoaded', function() {

    let mainNav = document.querySelector('#menu')
    let navBarToggle = document.querySelector('#toggle')
    let noScroll = document.querySelector('body')

    navBarToggle.addEventListener('click', function () { 
      mainNav.classList.toggle('active')
      navBarToggle.classList.toggle('close')
      noScroll.classList.toggle('lock-scroll')
    })
  })
}

如果该解决方案不起作用，您可以使用动态导入