How to switch language in place at any given page?

[georgehua]

Love the project!

I'm new to react ecosystem, probably I just missed this part in the documentation. I'm looking for a way to switch the language at any given page. For example, a user visit a random page say the /about page, and could switch to /jp/about page by selecting from the language dropdown menu. I'm thinking to create a client component and use the usePathname() hook to get the current path, then use Link component in the library to let user select.

This is my client Language selection component, I imported this component into my root layout. But I don't understand in this example, the console.log printed twice, the first time returns null and the second time returns a valid path. This results in Unhandled Runtime Error. TypeError: Cannot read properties of null (reading 'host') - I guess if it's null, then the href prop of the Link component can't read it.

Do you know how do I do this properly? Or is there a better way to achieve this feature?

"use client";

import { usePathname } from "next-intl/client";
import { Link } from "next-intl";

export default function Language() {
  const pathname = usePathname();

  console.log(pathname);

  return (
    <>
      <div>
        <Link href="/about">Go to about page</Link>
        <Link href={pathname} locale="en">
            Switch to EN
        </Link>
        <Link href={pathname} locale="jp">
            Switch to JP
        </Link>
      </div>
    </>
  );
}

[amannn]

Hey @georgehua and thanks for the question! That's a good point, the initial render with null is there for historic reasons and can now be improved (see the first task in the task list at #149). There will soon be a new version that improves this!