NextJS+Tauri中Window未定义问题求助（自定义标题栏场景）

问题现象 #

在NextJS与Tauri组合开发时，出现了Window is undefined错误，错误截图如下：

正在尝试的操作 #

我想通过Tauri的appWindow对象调用appWindow.minimize()、appWindow.toggleMaximize()和appWindow.close()方法，实现自定义标题栏功能。

代码实现 #

import { appWindow } from "@tauri-apps/api/window";

const CustomTitleBar = () => {
  const hasLoaded = hasLoadedCSR(); // 自定义hook，通过useEffect判断组件是否已挂载

  if (typeof window === "undefined") return <></>; // 第一次尝试：禁用该组件的SSR
  if (!hasLoaded) return <></>; // 第二次尝试：禁用该组件的SSR
  return (
    <>
      <div data-tauri-drag-region className="titlebar">
        <button
          className="titlebar-button"
          id="titlebar-minimize"
          onClick={() => {
            console.log("Clicked");
            appWindow.minimize();
          }}
        >
          <img
            src="https://api.iconify.design/mdi:window-minimize.svg"
            alt="minimize"
          />
        </button>
        <button
          className="titlebar-button"
          id="titlebar-maximize"
          onClick={() => appWindow.toggleMaximize()}
        >
          <img
            src="https://api.iconify.design/mdi:window-maximize.svg"
            alt="maximize"
          />
        </button>
        <button className="titlebar-button" id="titlebar-close">
          <img
            src="https://api.iconify.design/mdi:close.svg"
            alt="close"
            onClick={() => appWindow.close()}
          />
        </button>
      </div>
    </>
  );
};

export default CustomTitleBar;

已尝试的解决方案 #

我判断这个问题是由SSR（服务端渲染）导致的，参考相关问题的解决方案后，尝试了两种禁用该组件SSR的方案：

• 检查typeof window === "undefined"时返回空组件
• 通过自定义hookhasLoadedCSR()判断组件是否挂载，未挂载时返回空组件

但这两种方案都没能解决问题，希望能得到帮助。

内容的提问来源于stack exchange，提问作者C.Tale