I have this code layout.tsx here from next-intl doc
import {NextIntlClientProvider} from 'next-intl';
import {notFound} from 'next/navigation';
export function generateStaticParams() {
return [{locale: 'en'}, {locale: 'de'}];
}
export default async function LocaleLayout({children, params: {locale}}) {
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>
);
}
When npm run dev, I have this error:
Unhandled Runtime Error TypeError: Cannot destructure property 'children' of 'param' as it is undefined.
I have tried to using interface but the error still there.
interface Props {
children?: React.ReactNode;
params?: {
locale: any;
};
}
export default async function LocaleLayout({
children,
params: { locale },
}: Props)
Here your component expect
paramsas props to destructlocalefrom it but hereyou see that
paramsis optional so if you don't pass it as props, the function cannot destructlocalefrom ityou can do this :
here params take
{}as value if it is not provided this will solve the error, then, you destructlocalfrom it.