Next.js Discord

Discord Forum

Trouble when run build

Unanswered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
so i just want build the code and then the error happen just like this

and the component like this

 import CreatePost from "@/components/organism/CreatePost";
import { getQueryClient } from "@/services/get-query-client";
import { getPost } from "@/services/postsFetcher";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const queryClient = getQueryClient();
  queryClient.prefetchQuery({
    queryKey: ["post", slug],
    queryFn: () => getPost(slug),
  });

  return (
    <main>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <CreatePost slug={slug} />
      </HydrationBoundary>
    </main>
  );
}


and the route like this. is the route can't like that for now version?

2 Replies

Asian black bear
Try to inline the Props type into the signature.
HimalayanOP
sorry in the above is different file. this the correct code
import { notFound } from "next/navigation";
import { getPublicPost } from "@/services/postsFetcher/public";
import BlogDetailPage from "@/components/blog/blog-detail-page";
import { Metadata } from "next";

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  try {
    const param = await params;
    const { data: post } = await getPublicPost(param.slug);

    if (!post) {
      return {
        title: "Artikel Tidak Ditemukan",
        description: "Artikel yang Anda cari tidak ditemukan",
      };
    }

    return {
      title: `${post.title} | Elearning Platform`,
      description: post.title,
      keywords: post.categories.join(", "),
      openGraph: {
        title: `${post.title} | Elearning Platform`,
        description: post.title,
        url: `/blog/${post.slug}`,
        images: [
          {
            url: post.thumbnail,
            width: 1200,
            height: 630,
            alt: post.title,
          },
        ],
      },
    };
  } catch {
    return {
      title: "Artikel Tidak Ditemukan",
      description: "Artikel yang Anda cari tidak ditemukan",
    };
  }
}

export default async function Page({ params }: Props) {
  try {
    const { slug } = await params;
    const { data: post } = await getPublicPost(slug);

    if (!post) {
      notFound();
    }

    const formattedDate = new Date(post.createdAt).toLocaleDateString("id-ID", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });

    return <BlogDetailPage post={post} formattedDate={formattedDate} />;
  } catch {
    notFound();
  }
}