Switched to Next.Js

src/components/Navbar.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { useUmami } from "@danielgtmn/umami-react";
-import { Link, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 export function Navbar() {
-  const location = useLocation();
+  const pathname = usePathname();
   const { track } = useUmami();
 
   const navItems = [
@@ -12,7 +15,7 @@ export function Navbar() {
   ];
 
   const handleSwitch = (path: string) => {
-    track("nav_to_" + path.replaceAll("/", "_"));
+    track("nav_to_" + path.replaceAll("/", "root"));
   };
 
   return (
@@ -21,11 +24,11 @@ export function Navbar() {
         {navItems.map((item) => (
           <Link
             key={item.path}
-            to={item.path}
+            href={item.path}
             onClick={() => handleSwitch(item.path)}
             className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full 
               ${
-                location.pathname === item.path
+                pathname === item.path
                   ? "bg-white text-black scale-105 shadow-xl shadow-white/10"
                   : "text-gray-400 hover:text-white"
               }`}
@@ -37,3 +40,4 @@ export function Navbar() {
     </nav>
   );
 }
+