我正在使用 Next.js 構建一個應用程序，但我的標題組件遇到了問題。我有一個菜單可以折疊成移動設備上的漢堡菜單。當菜單出現時，我需要顯示和隱藏整個頁面的模糊。所以我試圖用 js 邏輯來做到這一點。我面臨的問題是邏輯在服務器上執(zhí)行，但我無法添加客戶端邏輯，所以點擊按鈕永遠不會起作用。代碼如下：import React, { useState } from 'react'export default () => {    const [showMenu, setShowMenu] = useState(false)    function toggleMenu () {        setShowMenu(!showMenu)    }    return (      <>        <nav id="header">          <button onClick={toggleMenu}>X</button>        </nav>        { showMenu ?             <div style={{background: 'rgba(0,0,0,.5)'}}></div>        : null        }      </>  )}