I’m currently working with Next.js 15 and next-intl for i18n (internationalization) in my application. Everything seems to be working fine, but I am getting the following error when trying to access the locale in my layout:
Error: Route “/[locale]” used headers().get('X-NEXT-INTL-LOCALE'). headers() should be awaited before using its value.
Here is the layout where I use next-intl:
import { NextIntlClientProvider } from "next-intl";
import { headers } from "next/headers";
import { notFound } from "next/navigation";
export async function generateStaticParams() {
return [{ locale: "en" }, { locale: "lt" }];
}
export default async function LocaleLayout({ children, params }) {
const param = await params;
const localeFromParams = param?.locale;
const headerLocale = await headers().then((hdr) =>
hdr.get("X-NEXT-INTL-LOCALE")
);
const locale = localeFromParams || headerLocale;
if (!locale) {
notFound();
}
let messages;
try {
messages = (await import(`../../messages/${locale}.json`)).default;
} catch (error) {
notFound();
}
return (
<html lang={locale}>
<body>
<NextIntlClientProvider locale={locale} messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}
Steps I’ve taken to resolve the issue:
I am correctly awaiting params and headers() in my layout, but I still receive this error.
I’ve checked my middleware.js configuration, and it seems to be set up properly for next-intl to pass the locale correctly.
I even attempted to await headers() before accessing get(“X-NEXT-INTL-LOCALE”), as mentioned in the error, but the issue persists.
Error Details:
The error message suggests that headers() should be awaited, but I have done so already.
I’m using the next-intl package to handle translations dynamically based on the locale in the URL, but I keep getting the error when trying to fetch the locale from headers.
My request.js for fetching the translations:
import { getRequestConfig } from "next-intl/server";
export default getRequestConfig(async ({ locale }) => {
if (!locale) {
console.error("Locale is undefined in getRequestConfig.");
throw new Error("Locale is undefined in getRequestConfig.");
}
try {
const messages = await import(`../messages/${locale}.json`);
console.log("Loaded messages for locale:", locale);
return { messages: messages.default };
} catch (error) {
console.error(`Failed to load messages for locale: ${locale}`, error);
throw new Error(`Failed to load messages for locale: ${locale}`);
}
});
What I expect to happen:
The locale should be correctly retrieved from either the URL parameters (params) or the headers (X-NEXT-INTL-LOCALE), and the corresponding translation file should be loaded.
What I have tried:
Awaiting params and headers() properly.
Ensuring the translation files are correctly imported.
Trying both approaches (params.locale and headers().get(“X-NEXT-INTL-LOCALE”)), but the error persists.
Questions:
Why am I still getting the headers() error, even though I’m using await properly?
Is there anything I’m missing in the configuration, or is there a specific pattern I should be following with next-intl in Next.js 15?
Any guidance or suggestions would be greatly appreciated!
