Next.js Discord

Discord Forum

How to make button change locale language on next/intl ?

Unanswered
West African Lion posted this in #help-forum
Open in Discord
Avatar
West African LionOP
Hi guys, im trying to change the language on my language switcher using next/intl, but i dont know how to get the current locale, or how to change it.

I want to switch the current locale with the codes of each language.
Image

14 Replies

Avatar
B33fb0n3
if you followed [this guide](https://nextjs.org/docs/app/building-your-application/routing/internationalization) for the setup of the internationalization, you can redirect the user to the new url with the new language
Avatar
West African LionOP
I did , redirect works perfectly. The only thing is with the language selector, to make it change the current language. In react with i18 i used to use useEffect to make the language change.
this is my layout : 
import type { NextPage } from "next";
import { notFound } from "next/navigation";
import { Poppins } from "next/font/google";
import { getTranslations } from "next-intl/server";
import "../globals.css";
import Navigation from "@/components/navigation";
import Footer from "@/components/footer";

export async function generateMetadata({
  params: { locale },
}: {
  params: {
    locale: string;
  };
}): Promise<{
  title: string;
  description: string;
}> {
  const t = await getTranslations();
  return {
    title: t("title"),
    description: t("description"),
  };
}

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
  variable: "--font-poppins",
});

const locales = ["en", "es"];

interface LocaleLayoutProps {
  children: React.ReactNode;
  params: {
    locale: string;
  };
}

const LocaleLayout: NextPage<LocaleLayoutProps> = ({
  children,
  params: { locale },
}) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) notFound();

  return (
    <html lang={locale} className={poppins.variable}>
      <body className=" ">
        <Navigation />
        {children}
        <Footer />
      </body>
    </html>
  );
};

export default LocaleLayout;
Avatar
West African LionOP
something liek this maybe ? 
 import { getPathname, locales, usePathname, useRouter } from "../navigation";

import "../node_modules/flag-icons/css/flag-icons.min.css";
export default function LanguageComponent() {
  const router = useRouter();
  const pathname = usePathname();
  const local = locales;
  const currentPath = getPathname();

  console.log(local);
  console.log(pathname);

  const languages = [
    {
      code: "en",
      name: "English",
      country_code: "us",
    },
    {
      code: "es",
      name: "Español",
      country_code: "es",
    },
    {
      code: "fr",
      name: "Français",
      country_code: "fr",
    },
    {
      code: "arabic",
      name: "Arabic",
      country_code: "arab",
    },
  ];

  function showDropdownOptions() {
    const optionsElement = document.getElementById("options");
    if (optionsElement) {
      optionsElement.classList.toggle("hidden");
      // También puedes realizar operaciones adicionales si optionsElement no es nulo
    }
  }

  function changeLocale(newLocale: string) {
    const currentPathname = getPathname({ href: router.pathname, locale: newLocale });
    router.push(currentPathname);
  }
  

  function Close() {
    const optionsElement = document.getElementById("options");
    if (optionsElement) {
      optionsElement.classList.toggle("hidden");
    }
  }
`
Avatar
B33fb0n3
You can get the current locale directly from the url as dynamic part. So you get the variable in your page.js or layout.js or … and then you can check the locale against your array or even directly render the right button 😊
Avatar
West African LionOP
I've tried with usePathname, but i dont get the locale language
just the path
What do i have to use to get the current locale ?
Use params ?
Avatar
West African LionOP
Made it work !
Thanks 😄
Avatar
Acorn Woodpecker
Hey @West African Lion , would you mind sharing how you solved this issue? I am about to struggle with the same 😄 Thanks!!!
Avatar
B33fb0n3
You can also do this: https://nextjs-forum.com/post/1186296764727316490#message-1186335315363905608
Avatar
West African LionOP
You solved the issue ?