web-humas-fe/app/news/detail/[id]/page.tsx

import { HumasLayout } from "@/components/layout/humas-layout";
import DetailPage from "@/components/main/detail/new-detail";
import { getArticleById } from "@/services/article";
import { Metadata } from "next";

type Props = {
  params: { id: string };
};

export async function generateMetadata({ params }: any): Promise<Metadata> {
  const res = await getArticleById(params.id?.split("-")[0]);
  const article = res?.data?.data;
  return {
    title: article.title,
    description: article.description,
    openGraph: {
      title: article.title,
      description: article.description,
      images: [`${article.thumbnailUrl}`],
    },
  };
}

export default async function NewsPage({ params }: any) {
  const articleId = params.id?.split("-")[0];
  const res = await getArticleById(articleId);
  const article = res?.data?.data;
  return (
    <HumasLayout>
      <DetailPage datas={article} />
    </HumasLayout>
  );
}