Using MDX

Using MDX

my-site
  - content
    - test-1.mdx
  - src
    - app
      - blog
        - [slug]
          - page.tsx
        - page.tsx

// page.tsx
import { promises as fs } from "fs";
import { compileMDX } from "next-mdx-remote/rsc";
import Link from "next/link";
import path from "path";

export async function generateMetadata() {
  const content = await fs.readFile(path.join(process.cwd(), "content", "test-1.mdx"), "utf-8");
  const data = await compileMDX<{ title: string }>({
    source: content,
    options: {
      parseFrontmatter: true,
    },
  });
  return { title: data.frontmatter?.title };
}

export default async function TestsPage() {
  const filenames = await fs.readdir(path.join(process.cwd(), "content"));
  const projects = await Promise.all(
    filenames.map(async (filename) => {
      const content = await fs.readFile(path.join(process.cwd(), "content", filename), "utf-8");
      const { frontmatter } = await compileMDX<{ title: string; summary: string }>({
        source: content,
        options: {
          parseFrontmatter: true,
        },
      });
      return {
        filename,
        slug: filename.replace(".mdx", ""),
        ...frontmatter,
      };
    }),
  );

  return (
    <section>
      <div className="container">
        <ul>
          {projects.map((project) => (
            <li key={project.slug} className="flex flex-col gap-2 py-3">
              <Link href={`/blog/${project.slug}`} className="text-3xl font-bold">
                {project.title}
              </Link>
              <p>{project.summary}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// [slug]/page.tsx
import { Table } from "@/components/mdx";
import { promises as fs } from "fs";
import { compileMDX } from "next-mdx-remote/rsc";
import path from "path";

export async function generateMetadata(props: { params: Promise<{ slug: string }> }) {
  const { slug } = await props.params;
  const content = await fs.readFile(path.join(process.cwd(), "content", `${slug}.mdx`), "utf-8");
  const data = await compileMDX<{ title: string }>({
    source: content,
    options: {
      parseFrontmatter: true,
    },
  });
  return { title: data.frontmatter?.title };
}

export default async function TestsPage(props: { params: Promise<{ slug: string }> }) {
  const params = await props.params;
  const content = await fs.readFile(path.join(process.cwd(), "content", `${params.slug}.mdx`), "utf-8");
  const data = await compileMDX<{ title: string }>({
    source: content,
    options: {
      parseFrontmatter: true,
    },
    components: {
      Table,
    },
  });

  return (
    <section>
      <div className="container">
        <article>{data.content}</article>
      </div>
    </section>
  );
}