CODEWITHSUNDEEP
javascriptnext.js
Lhony
Lhony

Reputation: 98

nextjs application error when I use tag button with generateMetaData

generateMetaData causes problem when I use tag button

Hello i have a problem and i need your help to resolve my issue.

I'm using nextjs and I can't seem to use the tag.

when i use generateMetaData provided by nextjs i am facing the error "Application error: a client-side exception has occurred (see the browser console for more information)."

My code to generateMetaData :

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],
    },
  };
}

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>
      </>
    )
}

When I add "use client" in the sharedFacebook function it works but when I click on the button I end up with the message "Application error..." :

same when i add "use client" in top to my component

Upvotes: 0

Views: 64

Answers (1)

Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4946

Page is a Server Component. <button> is a Client Component [1]. sharedFacebook is a function that can't be serialized. You can only pass serializable props from Server Components to Client Components.

To resolve, You need to move your event handler sharedFacebook to a Client Component.

// 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] In fact every html built-in element is a client component since only browser can know what to do with.

Upvotes: 1

Related Questions