Next.js: Update Navbar component when navigating to new route - reactjs

Question

Goal: Update Navbar accent when page is navigated to
Current: The Navbar accent has a delayed update. It updates to the last visited page.
For example: if I start on page1, then click on page2, the accent remains on page1 until I click on page2 again. If I then click on page3, page2 will now have the accent.
Attempted: I am using next.router in useEffect to try to update the accent on change of router.
Code:
app.js
import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
layout.js
import Navbar from "./Navbar";
export default function Layout({ children }) {
return (
<div className="layout">
<Navbar />
<div className="">{children}</div>
</div>
);
}
navbar.js
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const navigation = [
{ name: "page1", href: "/", current: true },
{ name: "page2", href: "/page2", current: false },
{ name: "page3", href: "/page3", current: false },
];
export default function Navbar() {
const router = useRouter();
useEffect(
(e) => {
navigation.map((item) => {
if (router.route == item.href) {
item.current = true;
} else {
item.current = false;
}
});
console.log(router.route);
},
[router]
);
return (
<div>
<div>
{navigation.map((item) => (
<Link href={item.href} key={item.name}>
<a
className={classNames(
item.current
? "border-indigo-500 text-gray-900"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
</Link>
))}
</div>
</div>
);
}
index.js page2 & page3 are similar.
export default function Home() {
return (
<div className="flex flex-col items-center justify-center min-h-screen py-2">
Hello
</div>
);
}

Answer 1

Drop the useEffect and just go with
import Link from "next/link";
import { useRouter } from "next/router";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const navigation = [
{ name: "page1", href: "/" },
{ name: "page2", href: "/page2" },
{ name: "page3", href: "/page3" },
];
export default function Navbar() {
const router = useRouter();
return (
<div>
<div>
{navigation.map((item) => (
<Link href={item.href} key={item.name}>
<a
className={classNames("inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium", router.route === item.href ? "border-indigo-500 text-gray-900" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700")}
aria-current={router.route === item.href ? "page" : undefined}
>
{item.name}
</a>
</Link>
))}
</div>
</div>
);
}

Answer 2

Maybe using the item.current booleans in your return statement could help you. e.g.
because you have
{ name: "page1", href: "/", current: true },
and you're specifying that it's "current" value is true when clicked.
You could do something like this:
return (
<div>
<div>
{navigation.map((item) => (
{item.current===false
<Link href={item.href} key={item.name}>
<a
className={classNames(
item.current
? "border-indigo-500 text-gray-900"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
</Link>}
{item.current===true
*** WHATEVER YOU WAN'T TO BE DIFFERENT ***
}
))}
</div>
</div>
);
}