How to apply a button that changes the language on the website with next-intl

[BearCooder]

Hello, I am getting more and more familiar with the library and the developer experience is very positive. However I have a question where I do not know how to solve my issue:

I have the following component:

'use client';
import React, { useState } from 'react';
import Link from 'next-intl/link';

const LanguageButton = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="block relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        type="button"
        className="flex p-2 rounded-md items-center border bg-black text-white"
        aria-haspopup="true"
        aria-expanded={isOpen}
      >
        Change Language
      </button>
      {isOpen && (
        <div
          className="absolute bg-black text-white rounded-md border"
          role="menu"
          aria-orientation="vertical"
        >
          <Link href="/" locale="de">
            Deutsch
          </Link>
          <br />
          <Link href="/" locale="en">
            English
          </Link>
          <br />
        </div>
      )}
    </div>
  );
};

export default LanguageButton;

Here I have a button that expands when I click on it and provides two options, German and English. Now when one user clicks on english I want to display the website in english and the same with german. This component is imported into my NavBar that is a Server component. However this is a client component because I have useState here. Which I need to expand the window where the options are hidden.

Right now as expected I get an error:

Unhandled Runtime Error
Error: No intl context found. Have you configured the provider?

I followed the initial setup and use the beta for server components. It works great. But I struggle a bit how to apply the translation function here? Can anyone help me please?

[amannn]

This page outlines the current recommendations for this situation: https://next-intl-docs.vercel.app/docs/environments/server-client-components

Hope this helps!

[BearCooder]

I read the page and also applied the Option 1: Passing translations to Client Components in my project and it works perfect :)

But I struggle how to apply this to the Link component for changing the language that I import from 'next-intl/link';

I have the parent component, a dropdown menu. When I click on it, it opens and I have the options to switch language(thats my child component), so to click on english or german. It uses useState and is therefore a client component.

And in the child component I have the imported Links from next-intl/link. But since the parent component uses "use client" my child component is also a client component and therefore it does not work.

I am not sure how I can solve this for the change language button with next-intl?

[BearCooder]

I am still not able to solve this problem :/ are there any examples with the link button from import Link from "next-intl/link"? @amannn

[amannn]

I have the parent component, a dropdown menu. When I click on it, it opens and I have the options to switch language(thats my child component), so to click on english or german. It uses useState and is therefore a client component.

There are multiple solutions here. If you want to keep your messages on the server side, you can make the interactive dropdown button a Client Component that accepts children. Now, you can pass content from a Server Component there, where the messages are already resolved and passed to a link. It's very much the same pattern as the Expandable component described in the docs, but this applies to DropdownMenuButton, LanguagePicker etc. as well.

I'd like to include more examples like this one at some point in the Server & Client Components guide, but I'm currently quite busy unfortunately. The page as well as the resources linked from this page are currently the best resources to learn about these patterns.

I hope this helps!

[KhasanboyAkhmedov]

i have the same issue (: how to solve?

[BearCooder]

I finally implemented it like in this example: https://github.com/amannn/next-intl/tree/main/examples/example-app-router/src/components

I use the LocaleSwitcher and LocaleSwitcherSelect components for my button language switch. It works perfect!

The demo example of this code is the first one here https://next-intl-docs.vercel.app/examples

[joelschneider]

@BearCooder would you mind sharing your code with your updated Button component / the LocaleSwitcher?

To have a nicer design, I tried to apply the logic from the example to an existing Dropdown component (replacing the select element and dynamically populating the dropdown items like in the example) but I am stuck.

Would be highly appreciated :)

[BearCooder]

Sure, I will share it in 1-2 days once I am back home. What problem do you have?

[joelschneider]

Thank you!

My concrete problem is not knowing how to pass the dynamic localized pathnames to the Dropdown Links so that they route you to the correct path upon clicking on them. It is most likely a basic understanding problem on my part (I'm quite new to this, also to coding in general).

I tried finding ways to invoke onLocaleChange as a solution, but my understanding of the topic is still limited. It feels like I don't fully grasp what I'm doing here.

LocaleSwitcher.tsx

import { useLocale, useTranslations } from "next-intl";
import { locales } from "../../config";
import LocaleSwitcherSelect from "./LocaleSwitcherSelect";
import Link from "next/link";

export default function LocaleSwitcher() {
  const t = useTranslations("LocaleSwitcher");
  const locale = useLocale();

  return (
    <LocaleSwitcherSelect currentLocale={t("locale", { locale: locale })}>
      {locales.map((cur) => (
        <Link
          href="#"
          className="block cursor-pointer whitespace-nowrap px-2 py-1 text-[15px] text-neutral-950 hover:rounded-[5px] hover:bg-neutral-900 hover:bg-opacity-5"
        >
          {t("locale", { locale: cur })}
        </Link>
      ))}
    </LocaleSwitcherSelect>
  );
}

LocaleSwitcherSelect.tsx

"use client";

import clsx from "clsx";
import {
  ReactNode,
  useState,
  useRef,
  useTransition,
  useEffect,
} from "react";
import { useRouter, usePathname } from "../../navigation";
import { ChevronDownIcon } from "../icons/chevron-down";

type LocaleSwitcherSelectProps = {
  currentLocale: string;
  children: ReactNode;
};

export default function LocaleSwitcherSelect({
  currentLocale,
  children,
}: LocaleSwitcherSelectProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const pathname = usePathname();

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const dropdownRef = useRef<HTMLDivElement | null>(null);

  function onLocaleChange(newLocale: string) {
    startTransition(() => {
      router.replace(pathname, { locale: newLocale });
    });
    setDropdownOpen(false);
  }

  useEffect(() => {
    const handleDocumentClick = (e: MouseEvent) => {
      // Check if dropdown is open and the click is outside both dropdown and button
      if (
        dropdownOpen &&
        !dropdownRef.current?.contains(e.target as Node) &&
        !buttonRef.current?.contains(e.target as Node)
      ) {
        setDropdownOpen(false);
      }
    };

    // Attach the event listener to the document
    document.addEventListener("mousedown", handleDocumentClick);

    // Clean up the listener on component unmount
    return () => {
      document.removeEventListener("mousedown", handleDocumentClick);
    };
  }, [dropdownOpen]);

  return (
    <div className="relative">
      <button
        ref={buttonRef}
        className={clsx(
          "flex cursor-pointer items-center rounded-[5px] px-[10px] py-1 text-[15px] font-medium leading-6 text-neutral-950 hover:bg-neutral-900 hover:bg-opacity-5",
          {
            "pointer-events-none opacity-30": isPending,
          }
        )}
        onClick={() => setDropdownOpen(!dropdownOpen)}
        disabled={isPending}
      >
        <span className="relative inline-block">{currentLocale}</span>
        <span className="ml-2 inline-block align-middle">
          <ChevronDownIcon
            className="ml-10 flex-none text-neutral-950"
            aria-hidden="true"
          />
        </span>
      </button>
      {dropdownOpen && (
        <div
          className={`absolute left-0 top-full z-10 w-28 origin-top-left rounded-[5px] bg-white p-1 shadow-md ${
            dropdownOpen
              ? "animate-popIn opacity-100"
              : "pointer-events-none opacity-0"
          }`}
          ref={dropdownRef}
        >
          {children}
        </div>
      )}
    </div>
  );
}

[joelschneider]

Hey @BearCooder, any chance I could have a glimpse at your code? Maybe it helps me come up with a solution for my problem :)

[yaman3bd]

@amannn , Hi, I am following this step guide: App Router setup without i18n routing

and I am building a multi-tenant app so the default locale, supported locales, and the messages are fetched from CMS this is how I am doing it:
i18n.ts:

import { headers } from "next/headers";

import { getRequestConfig } from "next-intl/server";

import { fetchTenant, fetchTranslationsForTenant } from "@/lib/fetchers";

export default getRequestConfig(async () => {
  // Provide a static locale, fetch a user setting,
  // read from `cookies()`, `headers()`, etc.
  const domain = headers().get("host")?.replace(".localhost:3000", "") as string;

  const tenant = await fetchTenant(domain);

  const locale = tenant.locale;

  const messages = await fetchTranslationsForTenant(domain);

  return {
    locale,
    messages: messages[locale]
  };
});

but how would I implement a locale switcher to change the languages based on the tenant supported locales?
I saw this example: https://github.com/amannn/next-intl/blob/main/examples/example-app-router/src/components/LocaleSwitcherSelect.tsx
but it is using route locale, in my case how would I implement a locale switcher?

[amannn]

Is tenant.locale the default locale or the only locale supported on that tenant? In case of the former, changing the language would mean changing the tenant, right? How does your routing structure look like?

[yaman3bd]

the tenant.locale is the default locale of the tenant,
and to get the supported locales of the tenant:
tenant.supported_locales
and I am still trying to find a way to pass the supported locales and the default locale to next-intl/middleware
and if the tenant changes the default language it would mean changing the default locale of the app,
my routing structure:

.
└── app/
    ├── [domain]/
    │   └── [locale]/
    │       ├── layout.tsx
    │       ├── not-found.tsx
    │       └── page.tsx
    ├── _components
    ├── providers.tsx
    ├── robots.ts
    └── sitemap.ts

the tenant can manage how many active locales would be in the app, and what is the default locale of the app
for new users visiting I will show the default locale
for old visiting users, the locale is going to be based on what the user has selected
for example:
the user visits the site and the default locale is: en
but they change it to ar or whatever language they want
then I want to save what they select in the cookies and on each visit it will be the default one
for the users that are visiting the site for the first time, I will show the tenant default locale

[amannn]

I see! Is the [domain] segment visible to the user? Or is this only available internally, and if so, why? (SSG?)

[yaman3bd]

I see! Is the [domain] segment visible to the user? Or is this only available internally, and if so, why? (SSG?)

I didn't quite understand what you meant. Could you please explain it in a bit more detail?

[amannn]

Let's continue over here: #1107 (comment)