error:SEGMENT MISMATCH. next intl next.js13

Question

my installed versions : ( "next": "^13.5.2","next-intl": "^3.0.0-beta.19")

hey there, im facing problem with next intl app directory next.js 13, when i switch the lang for example (en to fr) and navigate to another page my next app somtimes craches in production and i look in the console it says (error:SEGMENT MISMATCH) and it happen so much in the opera gx browser

and when i looked to the application tab in the cookies tab, when i switch from lang for example ar to en and navigate to other page it will back to ar lang but it should stay en

i tryed the error.js file in next.js13 to catch the error but it still my site craches

Answer 1

first install latest version of next-intl (in my case:"next": "^13.5.2","next-intl": "^3.1.2"), the problem was in the link component i was using the nextjs version but u should use the next-intl version.

import { createSharedPathnamesNavigation } from "next-intl/navigation";

export const locales = ["en", "fr", "ar"];

export const { Link, redirect, usePathname, useRouter } =
createSharedPathnamesNavigation({ locales });

view the next-intl docs https://next-intl-docs.vercel.app/docs/routing/navigation#shared-pathnames

Answer 2

Try this solution (works for me)

"use client";

import { Link, useLocale, usePathname } from "@/i18n";

import { buttonVariants } from "./ui/button";

export function LanguageToggler({ href }: { href?: string }) {
  const lang = useLocale();
  const pathname = usePathname();

  return (
    <Link
      href={href ?? pathname}
      locale={lang === "en" ? "ar" : "en"}
      className={buttonVariants({
        variant: "ghost",
        size: "icon",
        className: "text-lg",
      })}
    >
      <span>{lang === "en" ? "عربي" : "En"}</span>
    </Link>
  );
}

Note: <Link /> in next-intl-rc.* is imported from a local file not from "next-intl/link" as in your version next-intl-beta.*