How to make button change locale language on next/intl ?
Unanswered
West African Lion posted this in #help-forum
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.
I want to switch the current locale with the codes of each language.
14 Replies
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
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;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");
}
}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 😊
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 ?
West African LionOP
Made it work !
Thanks 😄
Acorn Woodpecker
Hey @West African Lion , would you mind sharing how you solved this issue? I am about to struggle with the same 😄 Thanks!!!
You can also do this: https://nextjs-forum.com/post/1186296764727316490#message-1186335315363905608
West African LionOP
You solved the issue ?