I'm currently utilizing Nextjs, typescript, and next-intl in my project.
Within my layout.tsx file, I have the following code snippet:
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
export default async function RootLayout({
children,
params: {locale}
}: Readonly<{
children: React.ReactNode;
params: {locale: string};
}>) {
const messages = await getMessages();
return (
<html lang={locale} className="scroll-smooth">
<body className={inter.className}>
<header className="fixed bg-black w-full "><Navigation locale={locale} menu1={messages.Menu.menu1} menu2={messages.Menu.menu2} submenu1={messages.Menu.submenu1} submenu2={messages.Menu.submenu2}/></header>
The contents of my en.json file are as follows:
{
"Menu": {
"menu1": "first",
"menu2": "second",
"submenu1": "sub1",
"submenu2": "sub2"
}
}
While the site works fine locally, I encounter a build issue when trying to run it. The problem arises when calling the value menu1={messages.Menu.menu1}
When this occurs, I receive the following message in vscode:
Property 'menu1' does not exist on type 'string | AbstractIntlMessages'.
Property 'menu1' does not exist on type 'string'.ts(2339)
any
How can I resolve this? Your insights are greatly appreciated.