next-cochise/src/app/(main)/blog/[slug]/page.tsx

import BlogComments from "@/components/BlogComments";
import BlogWidget from "@/components/BlogWidget";
import CommentForm from "@/components/CommentForm";
import { allBlogs } from "@/data/blogs";
import payloadConfig from "@/payload.config";
import { formatDate } from "@/utils/datetime";
import Image from "next/image";
import { getPayload } from "payload";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";

async function fetchBlog(slug: string) {
  const payload = await getPayload({ config: payloadConfig });
  const blogDataQuery = await payload.find({
    collection: "blogs",
    where: {
      slug: { equals: slug },
    },
    limit: 1,
    pagination: false,
  });

  if (!blogDataQuery?.docs?.[0]) return null;

  const data = blogDataQuery?.docs?.[0];
  const createdAt = formatDate(data.createdAt);
  const imgUrl = typeof data.img !== "number" ? (data?.img?.url ?? "") : "";

  return {
    data,
    createdAt,
    imgUrl,
  };
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const blog = await fetchBlog(params.slug);

  if (!blog) {
    return {
      title: "Cochise Oncology",
      description: "Cochise Oncology",
      openGraph: {
        title: "Cochise Oncology",
        description: "Cochise Oncology",
        images: [""],
      },
    };
  }

  const title = `${blog.data.title} - Cochise Oncology`;

  return {
    title: title,
    description: title,
    openGraph: {
      title: title,
      description: title,
      images: [blog.imgUrl || ""],
    },
  };
}

export default async function BlogRead({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const slug = (await params).slug;
  const data = await fetchBlog(slug);

  if (!data) return <></>;

  const blog = allBlogs.filter((elm) => elm.id == 34)[0] || allBlogs[0];
  return (
    <>
      <section
        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
        id="home"
      >
        {/* <!-- Background Shape --> */}
        <div className="bg-shape-1 wow fadeIn">
          <Image
            src="/assets/images/demo-fancy/bg-shape-1.svg"
            width={1443}
            height={844}
            alt=""
          />
        </div>
        {/* <!-- End Background Shape --> */}

        <div className="container position-relative pt-sm-40 text-center">
          <div className="row">
            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
              <h1 className="hs-title-10 mb-10 wow fadeInUp">
                {data.data.title}
              </h1>
              {/* Author, Categories, Comments */}
              <div
                className="blog-item-data mb-0 wow fadeIn"
                data-wow-delay="0.2s"
              >
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-clock size-16" />
                    <span className="visually-hidden">Date:</span>{" "}
                    {data.createdAt}
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-user size-16" />
                    <span className="visually-hidden">Author:</span> John Doe
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <i className="mi-folder size-16" />
                  <span className="visually-hidden">Categories:</span>
                  <a href="#">Design</a>, <a href="#">Branding</a>
                </div>
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-message size-16" /> 5 Comments
                  </a>
                </div>
              </div>
              {/* End Author, Categories, Comments */}
            </div>
          </div>
        </div>
      </section>
      <>
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row">
              {/* Content */}
              <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                {/* Post */}
                <div className="blog-item mb-80 mb-xs-40">
                  <div className="blog-item-body">
                    <div className="mb-40 mb-xs-30">
                      <Image
                        src={data.imgUrl}
                        alt="Image Description"
                        width={1350}
                        height={759}
                        className="round"
                      />
                    </div>
                    <div>
                      <RichText data={data.data.content} />
                    </div>
                  </div>
                </div>
                {/* End Post */}
                {/* Comments */}
                <div className="mb-80 mb-xs-40">
                  <h4 className="blog-page-title">
                    Comments <small className="number">(3)</small>
                  </h4>
                  <ul className="media-list comment-list clearlist">
                    <BlogComments />
                  </ul>
                </div>
                {/* End Comments */}
                {/* Add Comment */}
                <div className="mb-80 mb-xs-40">
                  <h4 className="blog-page-title">Leave a comment</h4>
                  {/* Form */}
                  <CommentForm />
                  {/* End Form */}
                </div>
                {/* End Add Comment */}
                {/* Prev/Next Post */}
                <div className="clearfix mt-40">
                  <a href="#" className="blog-item-more circle left">
                    <i className="mi-chevron-left" />
                    &nbsp;Prev post
                  </a>
                  <a href="#" className="blog-item-more circle right">
                    Next post&nbsp;
                    <i className="mi-chevron-right" />
                  </a>
                </div>
                {/* End Prev/Next Post */}
              </div>
              {/* End Content */}
            </div>
          </div>
        </section>
        {/* End Section */}
        {/* Divider */}
        <hr className="mt-0 mb-0" />
        {/* End Divider */}
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row mt-n60">
              <BlogWidget
                inputClass="newsletter-field form-control input-md circle mb-10"
                btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
              />
            </div>
          </div>
        </section>
      </>
    </>
  );
}