Error de aplicación nextjs cuando uso el botón de etiqueta con generateMetaData
generateMetaData causa un problema cuando uso el botón de etiqueta
Hola tengo un problema y necesito su ayuda para resolver mi problema.
Estoy usando nextjs y parece que no puedo usar la etiqueta.
cuando uso generateMetaData proporcionado por nextjs, me aparece el error " Error de aplicación: se ha producido una excepción en el lado del cliente (consulte la consola del navegador para obtener más información) " .
Mi código para generarMetaData:
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],
},
};
}
Mi componente:
export default async function Page({ params, searchParams }) {
const article = await getArticle(params.id);
const sharedFacebook = async () => {
alert("clicked");
};
return (
<>
<button onClick={sharedFacebook}></button>
</>
)
}
Cuando agrego "usar cliente" en la función compartida de Facebook, funciona, pero cuando hago clic en el botón termino con el mensaje "Error de aplicación...":
Lo mismo cuando agrego "usar cliente" en la parte superior de mi componente
Pagees un componente del servidor. <button>es un componente del cliente [1]. sharedFacebookes una función que no se puede serializar. Solo puede pasar accesorios serializables desde componentes de servidor a componentes de cliente.
Para resolverlo, debe mover su controlador de eventos sharedFacebooka un componente del cliente.
// app/page.tsx
import {Button} from "./button";
export default async function Page({ params, searchParams }) {
const article = await getArticle(params.id);
return (
<>
<Button />
</>
)
}
// app/button.tsx
"use client";
export function Button() {
const onClick = () => {
console.log("clicked!")
}
retrun <button onClick={handler}>Click Me</button>
}
- [1] De hecho, cada elemento HTML integrado es un componente del cliente, ya que sólo el navegador puede saber qué hacer con él.
