I'm trying to set dynamic routes for translation for specific pages in next js using i18next. The following code works well, but this is routing to all pages and generating errors while next build.

const router = useRouter();
const path = router.route; 

<Link href={`/fr${path}`}>
   French
</Link>
<Link href={`/es${path}`}>
   Spanish
</Link>

I want to have this dynamic translation routes only for 2 pages that is home and about page. The other workaround would be to seperate the translation routes link from the navbar and have it where ever needed. But, I want to achieve this translation through the navbar component so that I can reuse the component on every page. Is there a way to approach this in a reusable component.