I keep encountering an issue with generateMetaData when trying to utilize the button tag. Can you help me resolve this problem?
Currently, I am working with nextjs and I am unable to properly use the <button> tag.
Whenever I implement generateMetaData provided by nextjs, I receive the error message "Application error: a client-side exception has occurred (see the browser console for more information)."
This is how I define my generateMetaData code:
const getArticle = cache((id) => {
const articleService = new ArticleService();
return articleService.getOne(id).then((res) => {
return res.resultFinal;
});
});
export async function generateMetadata({ params }) {
const id = params.id;
const articleService = new ArticleService();
const article = await articleService.getOne(id).then((res) => {
return res.resultFinal;
});
if (!article) {
return {
title: "Article not found",
description: "Article not found",
openGraph: {
title: "Article not found",
description: "Article not found",
},
};
}
return {
title: article.title,
description: article.description,
openGraph: {
title: article.title,
description: article.description,
images: [process.env.NEXT_PUBLIC_IMAGE_BASE_URL + "/" + article.medias[0].url],
},
};
}
Here is a snippet of my component:
export default async function Page({ params, searchParams }) {
const article = await getArticle(params.id);
const sharedFacebook = async () => {
alert("clicked");
};
return (
<>
<button onClick={sharedFacebook}></button>
</>
)
}
Adding "use client" in the sharedFacebook function seems to work, but clicking the button still triggers the "Application error..." message:
The same issue occurs when I add "use client" at the beginning of my component.