export const getPosts = async () => {
  const files = await fs.readdir(postsDirectory);
  const fileNames = files.filter((file) => file.endsWith(".mdx"));

  const posts: Post[] = [];

  for await (const fileName of fileNames) {
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = await fs.readFile(fullPath, "utf-8");
    const frontmatter = matter(fileContents);

    const safeData = PostSchema.safeParse(frontmatter.data);

    if (!safeData.success) {
      console.error(safeData.error.errors);
      continue;
    }

    if (!safeData.data.published && process.env.NODE_ENV !== "development")
      continue;

    posts.push({
      ...safeData.data,
      slug: fileName.replace(/^\d+-/, "").replace(".mdx", ""),
      content: frontmatter.content,
    });
  }

  return posts;
};

export const getPost = async (slug: string) => {
  const posts = await getPosts();
  return posts.find((post) => post.slug === slug);
};

If you remove this function (temporary) and also remove the code that depend on that line, check if it's loading fine

import { MDXRemote } from "next-mdx-remote-client/rsc";
import { MDX_COMPONENTS } from "./mdx-components";
import { rehypePlugin } from "./mdx-plugin";
import { Suspense } from "react";

export const Mdx = ({ children }: { children: string }) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MDXRemote
        source={children}
        options={{ mdxOptions: { rehypePlugins: rehypePlugin } }}
        components={MDX_COMPONENTS}
      />
    </Suspense>
  );
};

import { MdxYouTube } from "./MdxYouTube";

export const MDX_COMPONENTS = {
  YouTube: MdxYouTube,
};

import { YouTubeEmbed } from "@next/third-parties/google";

export const MdxYouTube = ({
  id,
  description,
}: {
  id: string;
  description?: string;
}) => {
  return (
    <div>
      <YouTubeEmbed videoid={id} />
      <p className="text-xs text-muted-foreground">{description}</p>
    </div>
  );
};

const fileContents = await fs.readFile(fullPath, "utf-8");

Can you create some logging how long what kind of part from your app takes? With some console.logs and they contain a time. Maybe substract these times to calculate a relative time instead of an absolute time...

const startTime = performance.now();
const post = await getPost(props.params.slug);
const endTime = performance.now();
console.log(`getPostDuration: ${endTime - startTime}ms`);

import { MDXRemote } from "next-mdx-remote-client/rsc";
import { MDX_COMPONENTS } from "./mdx-components";
import { rehypePlugin } from "./mdx-plugin";
import { Suspense } from "react";

export const Mdx = ({ children }: { children: string }) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MDXRemote
        source={children}
        options={{ mdxOptions: { rehypePlugins: rehypePlugin } }}
        components={MDX_COMPONENTS}
      />
    </Suspense>
  );
};

https://yourcdn.com/yourpicture.png
https://yourcdn.com/yourcontent.mdx
https://yourcdn.com/yourvideo.mp4