How to implement language switcher using next-intl

penguin_pam

"use client"; import { useLocale } from "next-intl"; import { locales, localeNames } from "../../i18nconfig"; import { useRouter } from "next/router"; import Link from 'next/link'; import { Fragment } from "react"; export default function LocaleSwitcher(){ const locale = useLocale(); const router = useRouter(); const switchLocale = (newLocale: string) => { router.push({ pathname: router.pathname, query: router.query }, router.asPath, {locale:...

Originally asked by Alexis Esteban Herrera Benitez on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

You seem to have 2 separate issues here. Replace next/router with next/navigation. Here's the docs The useRouter hook should be imported from next/navigation and not next/router when using the App Router import { useRouter } from "next/navigation"; Changing translations. You seem to be mapping all your translations and using both Link logic and push logic instead of using only one at a time. And I don't see the reason why you need to add language in params rather than in router for example /[locale]/contact. I suggest taking a look at nextjs docs and on locale switcher implementation

Full answer by Arnas Dičkus: https://stackoverflow.stackexchange.com/a/77619129 (CC BY-SA 4.0).

Need it done for your business? UphillTech.