vercel__next.js/examples/with-i18n-next-intl/components/Navigation.js

import { useTranslations } from "next-intl";
import { useRouter } from "next/router";
import Link from "next/link";

export default function Navigation() {
  const t = useTranslations("Navigation");
  const { locale, locales, route } = useRouter();
  const otherLocale = locales?.find((cur) => cur !== locale);

  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div style={{ display: "flex", gap: 10 }}>
        <Link href="/">{t("index")}</Link>
        <Link href="/about">{t("about")}</Link>
      </div>
      {otherLocale && (
        <Link href={route} locale={otherLocale}>
          {t("switchLocale", { locale: otherLocale })}
        </Link>
      )}
    </div>
  );
}