App Router + next-intl: `locale` is undefined in layout.js when calling `getMessages(locale)`
Unanswered
Beagle-Harrier posted this in #help-forum
Beagle-HarrierOP
```js
export default async function getMessages(locale) {
if (!locale || typeof locale !== 'string') {
console.error(' Invalid or missing locale in getMessages:', locale);
throw new Error('Invalid locale');
}
// loading translation files here
}
Here’s my actual app/[locale]/layout.js:
import { notFound } from 'next/navigation';
import getMessages from '@/i18n/request';
import { setRequestLocale } from 'next-intl/server';
import { NextIntlClientProvider } from 'next-intl';
import LayoutWrapper from '@/components/LayoutWrapper';
import { i18n } from '../../i18n.config';
export const dynamic = 'force-dynamic';
export function generateStaticParams() {
return i18n.locales.map(locale => ({ locale }));
}
export default async function LocaleLayout({ children, params }) {
const { locale } = params;
if (!i18n.locales.includes(locale)) {
notFound();
}
setRequestLocale(locale);
let messages;
try {
const data = await getMessages(locale);
messages = data.messages;
} catch (error) {
console.error(' Erro ao carregar mensagens:', error);
notFound();
}
return (
<html lang={locale}>
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
<NextIntlClientProvider locale={locale} messages={messages}>
<LayoutWrapper>{children}</LayoutWrapper>
</NextIntlClientProvider>
</body>
</html>
);
}
next.config.js:
module.exports = {
i18n: {
locales: ['en', 'pt'],
defaultLocale: 'en',
},
experimental: {
serverActions: true,
},
};
Project structure:
app/
└── [locale]/
├── layout.js
└── page.js
i18n/
└── request.js
What I'm trying to understand:
* Why is locale showing as undefined inside getMessages()?
* Is my params extraction wrong in layout.js?
* Am I missing any required middleware or routing logic?
* Any help is hugely appreciated — I’ve tried many things and still can't fix this issue. Thanks in advance!
export default async function getMessages(locale) {
if (!locale || typeof locale !== 'string') {
console.error(' Invalid or missing locale in getMessages:', locale);
throw new Error('Invalid locale');
}
// loading translation files here
}
Here’s my actual app/[locale]/layout.js:
import { notFound } from 'next/navigation';
import getMessages from '@/i18n/request';
import { setRequestLocale } from 'next-intl/server';
import { NextIntlClientProvider } from 'next-intl';
import LayoutWrapper from '@/components/LayoutWrapper';
import { i18n } from '../../i18n.config';
export const dynamic = 'force-dynamic';
export function generateStaticParams() {
return i18n.locales.map(locale => ({ locale }));
}
export default async function LocaleLayout({ children, params }) {
const { locale } = params;
if (!i18n.locales.includes(locale)) {
notFound();
}
setRequestLocale(locale);
let messages;
try {
const data = await getMessages(locale);
messages = data.messages;
} catch (error) {
console.error(' Erro ao carregar mensagens:', error);
notFound();
}
return (
<html lang={locale}>
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
<NextIntlClientProvider locale={locale} messages={messages}>
<LayoutWrapper>{children}</LayoutWrapper>
</NextIntlClientProvider>
</body>
</html>
);
}
next.config.js:
module.exports = {
i18n: {
locales: ['en', 'pt'],
defaultLocale: 'en',
},
experimental: {
serverActions: true,
},
};
Project structure:
app/
└── [locale]/
├── layout.js
└── page.js
i18n/
└── request.js
What I'm trying to understand:
* Why is locale showing as undefined inside getMessages()?
* Is my params extraction wrong in layout.js?
* Am I missing any required middleware or routing logic?
* Any help is hugely appreciated — I’ve tried many things and still can't fix this issue. Thanks in advance!
2 Replies
if you are using next 15, params must be awaited
@chisto if you are using next 15, params must be awaited
Beagle-HarrierOP
thanks for the help!