在 Next.js 中打開移動導航時禁用主體滾動

Question

通常，您可以在 body 元素上切換 class 或 overflow 屬性以在打開移動菜單或模式時禁用滾動，但是在服務器端呈現 Next.js 時，無法訪問文檔 object。我如何在移動導航菜單在 Next.js 中打開？

我嘗試訪問文檔 object 以切換隱藏的覆蓋，但由於 Next.js 是在服務器端呈現的，因此文檔 object 尚不可用。

我還嘗試使用 state 並將其傳遞到導航組件以切換 styles，但不能在應用程序的頂層使用 useState。

Answer 1

不確定這樣做是否正確，但我使用了 useEffect 鈎子來確保代碼僅在組件加載后運行，然后將移動菜單 state 設置為依賴項。

useEffect(() => {
  mobileNav
    ? (document.body.style.overflow = 'hidden')
    : (document.body.style.overflow = 'auto');
}, [mobileMenuState]);