refactor: init switching to nextjs router

app/hooks/useDeviceInfo.ts

@@ -0,0 +1,44 @@
+// retur user device info
+
+import { useEffect, useState } from "react";
+
+export function useDeviceInfo() {
+  const [deviceInfo, setDeviceInfo] = useState({});
+
+  const [systemInfo, setSystemInfo] = useState<string | null>(null);
+  const [deviceType, setDeviceType] = useState<string | null>(null);
+  useEffect(() => {
+    const userAgent = navigator.userAgent.toLowerCase();
+
+    if (/iphone|ipad|ipod/.test(userAgent)) {
+      setSystemInfo("iOS");
+    }
+  }, []);
+
+  useEffect(() => {
+    const onResize = () => {
+      setDeviceInfo({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    if (window.innerWidth < 600) {
+      setDeviceType("mobile");
+    } else {
+      setDeviceType("desktop");
+    }
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return {
+    windowSize: deviceInfo,
+    systemInfo,
+    deviceType,
+  };
+}

app/hooks/useRelativePosition.ts

@@ -32,7 +32,7 @@ interface Position {
 }
 
 export default function useRelativePosition({
-  containerRef = { current: window.document.body },
+  containerRef = { current: null },
   delay = 100,
   offsetDistance = 0,
 }: Options) {

app/hooks/useWindowSize.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 type Size = {
   width: number;
@@ -10,10 +10,14 @@ export function useWindowSize(callback?: (size: Size) => void) {
 
   callbackRef.current = callback;
 
-  const [size, setSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
+  const [size, setSize] = useState({});
+
+  useEffect(() => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  }, []);
 
   useLayoutEffect(() => {
     const onResize = () => {