![](/img/trans.png)
[英]Window is undefined in Nextjs but values are needed in useState
[英]Window is undefined in NextJS + Tauri
我使用 Tauri 的appWindow
访问appWindow.minimize()
、 appWindow.toggleMaximize()
和appWindow.close()
以创建自定义标题栏。
import { appWindow } from "@tauri-apps/api/window";
const CustomTitleBar = () => {
const hasLoaded = hasLoadedCSR(); // custom hook for checking if component has mounted using useEffect
if (typeof window === "undefined") return <></>; // 1st attempt to disable SSR for this component
if (!hasLoaded) return <></>; // 2nd attempt to disable SSR for this component
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;
我基本上做了 2 次尝试来解决这个问题,因为我绝对认为这是由FabianLars在类似问题中提到的 SSR 引起的。
为了解决这个问题,我基本上使用dynamic
函数创建了另一个组件来强制CustomTitleBar
的 CSR。
import dynamic from "next/dynamic";
const DynamicCustomTitleBar = dynamic(() => import("./CustomTitleBar"), {
ssr: false,
});
export default DynamicCustomTitleBar;
我如何解决这个问题如下。
如果以及当我使用任何 @tauri-apps/api 导出时,我将它们包装在一个组件中,然后使用不带 ssr 的动态导入流导入该组件。 这主要是为了让我的项目井井有条,因为我只是为我可能想从 tauri-apps/api 使用的每个 function 创建一个包装器。
所以我会制作以下文件夹结构:
const TauriApiWrapComponent = dynamic(() => import("./TauriApiWrapComponent"), {
ssr: false,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.