fix: create useLazyPathname hook

utils/url.ts

@@ -1,3 +1,6 @@
+import { usePathname } from "next/navigation"
+import { useEffect, useState } from "react"
+
 export function removeMultipleSlashes(str: string) {
   return str.replaceAll(/\/\/+/g, "/")
 }
@@ -9,3 +12,16 @@ export function removeTrailingSlash(pathname: string) {
   }
   return pathname
 }
+
+/*** This hook is used to get the current pathname (as reflected in window.location.href) of the page. During ssr, the value from usePathname()
+ *  is the value return from NextResponse.rewrite() (e.g. the path from the app directory) instead of the actual pathname from the URL.
+ */
+export function useLazyPathname() {
+  const pathName = usePathname()
+  const [updatedPathName, setUpdatedPathName] = useState<string | null>(null)
+
+  useEffect(() => {
+    setUpdatedPathName(pathName)
+  }, [pathName])
+  return updatedPathName ? updatedPathName : null
+}