I am using “next-intl”: “^3.17.2” in my project. There is no problem with my language change switch. However, when I change the page by clicking on the links in the Navbar, the local language changes uncontrollably, why? Thanks.
i18.ts
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
import { Locale, locales } from 'lib/locales';
export default getRequestConfig(async ({locale}) => {
const baseLocale = new Intl.Locale(locale).baseName as Locale;
if (!locales.includes(baseLocale)) notFound();
return {
messages: (await import(`./messages/${locale}.json`)).default
};
});
middleware.ts
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
locales: ['de', 'en'],
defaultLocale: 'en'
});
export const config = {
matcher : ['/((?!api|static|.*\..*|_next).*)' , '/' , '/(en|de)/:path*'],
}
export default async function RootLayout({
children,
params: {locale}
}: {
children: React.ReactNode;
params: {locale: string};
}) {
const messages = await getMessages();
return (
<html lang={locale} className="light">
<body className="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800">
<Background />
<NextIntlClientProvider messages={messages}>
<Providers>
<>
<div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
<Navbar />
<main>
{children}
</main>
</div>
<Footer />
</>
</Providers>
</NextIntlClientProvider>
</body>
</html>
);
}
I expect the local language and locale in the URL not to change uncontrollably when the page changes.
New contributor
Sekunev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.